浏览器同源策略&跨域问题

同源策略

protocol协议、domain域名、port端口必须一致；限制跨域交互，这是浏览器一个用于隔离浅在恶意文件的重要安全机制。

解决跨域问题

同源策略导致的跨域问题是浏览器单方面拒绝相应数据，服务器端是处理完毕并做出相应的的。

代理跨域

实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略，而代理就是想办法让他们同源
代理服务器，需要做以下几个步骤：
接受客户端请求 。
将请求 转发给服务器。
拿到服务器 响应 数据。
将 响应 转发给客户端。

代理跨域原理

每个框架的代理方式都不一样，一般情况下会把目标服务器写在proxy这个字段后面。

vue跨域

在webpack的devServer里，webpack.config.js（vue中为vue.config.js）中配置如下信息：

module.exports = {
    //关闭eslint
    lintOnSave: false,
    devServer: {
        // true 则热更新，false 则手动刷新，默认值为 true
        inline: false,
        // development server port 8000
        port: 8001,
        //代理服务器解决跨域
        proxy: {
            //会把请求路径中的/api换为后面的代理服务器
            '/api': {
                //需要跨域提供数据的服务器地址，如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败
                target: 'http://39.98.123.211',

            }
        },
    }
}

配置文件需要重启动才能运行。

CORS

JSONP

由于同源策略的限制，AJAX请求是不允许进行跨域请求的，但是在HTML中，拥有src和href属性的标签是可以跨域请求外部资源的，如link、script、img、frame等（值得注意的是，不同标签允许的交互类型貌似是不同的，分别为跨域写、跨域资源嵌入、跨域读。