Ajax跨域

Ajax跨域

文章目录

​​Ajax同源策略​​​​使用JSONP解决跨域问题​​​​使用CORS解决跨域问题​​

Ajax同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源： 当前网页的url和Ajax请求的目标资源的url两者之间必须协议、域名、端口号 必须完全相同。

违背同源策略就是跨域。

同源演示：

服务器端：

const express = require('express');const app = express();app.get('/data', (request,)=>{ response.send('用户数据');});app.listen(3000, ()=>{ console.log("服务已经启动...");});

再说直白点这两个文件要在一个文件夹之中。

使用JSONP解决跨域问题

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

JSONP的工作原理： 在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

JSONP 的使用： 1.动态的创建一个 script 标签

var script = document.createElement("script");

2.设置 script 的 src，设置回调函数

script.src = " function abc(data) { alert(data.name);};

3.将 script 添加到 body

document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) { console.log("收到请求"); var callback = req.query.callback; var obj = { name:"孙悟空", age:18 } res.send(callback+"("+JSON.stringify(obj)+")");});

使用CORS解决跨域问题

CORS的工作原理： CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS 的使用：

app.all('/cors-server', (request,)=>{ //设置响应头 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Headers", '*'); response.setHeader("Access-Control-Allow-Method", '*'); // response.setHeader("Access-Control-Allow-Origin", " response.send('hello CORS');});

注意点：

①​​Access-Control-Allow-Origin: *​​ 表明，该资源可以被 任意 外域访问。

Access-Control-Allow-Origin: | *

如果服务端仅允许来自 的访问，该首部字段的内容如下：

Access-Control-Allow-Origin: X-My-Custom-Header, X-Another-Custom-Header

这样浏览器就能够通过 getResponseHeader 访问 X-My-Custom-Header 和 X-Another-Custom-Header 响应头了。

③​​Access-Control-Allow-Methods​​​ 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。 默认是GET、POST方法请求可以，如果想用其他方法发送请求例如PUT，DELETE，就要在服务器端指明这个字段

Access-Control-Allow-Methods: [, ]*

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。