跨域

跨域的原理

• 跨域是由于浏览器的同源策略，是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击，另外跨域的情况是请求发出去了，在浏览器端拦截
• 跨域场景简单来说，协议、主域名、子域名、端口号不一样导致的

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

跨域的方法（123了解，4重点）

通过jsonp跨域

• 缺点：jsonp只能发送get请求，不能请求post请求

通过iframe跨域

通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。了解就行

• document.domain + iframe跨域
• location.hash + iframe
• window.name + iframe跨域

跨域资源共享（CORS）

• CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）

反向代理，nginx/node跨域

• 浏览器访问后端服务器，遇到前面的跨域场景，就会出现跨域情况，原因是浏览器的同源策略
• 浏览器去访问nginx/node服务器，nginx/node服务器去访问后端服务器，服务器访问服务器就不存在跨域了

node跨域: vue框架的跨域(开发环境)

webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}

nginx跨域具体配置：(生产环境)

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}