跨域

跨域

违反同源策略的就被称为跨域.

同源策略

同源：协议、域名、端口号，三者必须一致。有一个不一致就被称为跨域。

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

为什么会出现跨域

原因：出于浏览器对同源策略的限制，浏览器会拒绝一部分跨域请求。

浏览器的同源策略请求是这样的：

• 通常浏览器会允许跨域写操作（Cross-origin writes）：如链接，重定向
• 通常浏览器会允许跨域资源潜入（Cross-origin embedding）：如img，script标签
• 通常浏览器会拒绝跨域读操作（Cross-origin reads）

解决

方法一：JSONP

JSONP是依靠程序员的聪明才智开发出来的，利用script标签发送，但是只能发送GET请求。

注意：需要前后台配合

//前台代码
<script type="text/javascript">
function dosomething(data){
    //处理获得的数据
}
</script>
<script src="http://example.com//testAJAX?callback=dosomething"></script>


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

优点：兼容更低版本的浏览器

缺点：只支持GET请求/XMLHttpRequest相对于JSONP有着更好的错误处理机制

方法二：CORS

Cross-Origin Resource Sharing，跨域资源共享。

它只在服务器端处理跨域，客户端不需要做任何处理。

同时支持GET和POST请求。

工作机制：通过一个响应头来告诉浏览器该请求允许跨域，浏览器就会执行响应的操作。

主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
    //通过res来设置响应头，来允许跨域请求
    //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");  
    res.set("Access-Control-Allow-Origin","*");
    res.send("testAJAX返回的响应");
});

方法三：postMessage

H5引进的新特性，通过它可以向不同的window对象发送请求，不论同源不同源。

window.postMessage可以安全实现跨域问题。IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

语法： window.postMessage(message,targetOrigin)

参考文章而作，侵权可删https://juejin.im/post/59c132415188256bb018e825

方法四：代理

关于正向代理和反向代理，详见文章：https://www.cnblogs.com/Anker/p/6056540.html

在前端页面解决跨域问题，利用反向代理： 更改package.json的配置文件："proxy": "http://localhost:4000"