vue开发环境跨域与生产环境跨域

常见的跨域的方式

同源策略
所谓同源（即指在同一个域）具有以下三个相同点
协议相同（protocol）
主机相同（host）
端口相同（port）

jsonp

JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。
html中script src属性获取其他源的数据

页面上调用js文件时不受跨域的影响，而且，凡是拥有src属性的标签都拥有跨域的能力，比如

<script type="text/javascript">
  var localHandler = function (data) {
    alert('跨域的remote.js文件可以调用本函数，带来的数据是：' + data.result);
  };
</script>
<script type="text/javascript" src = "http://remoteserver.com/remote.js"></script>

remote.js的代码

localHandler({
  "result": "我是远程js带来的数据"
})；

cors

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应
CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源
只要后端实现了 CORS，就实现了跨域

Proxy

见下文开发环境跨域

postMessage()方法

该window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。
通常，当且仅当它们源自的页面共享相同的协议、端口号和主机（也称为“同源策略”）时，允许不同页面上的脚本相互访问。window.postMessage()提供一种受控制的机制来安全地规避这种限制（如果使用得当）。

从广义上讲，一个窗口可以获得对另一个窗口的引用（例如，可以使用targetWindow=window.opener），然后使用targetWindow.postMessage() 在其上发送一个MessageEvent。然后，接收窗口可根据需要自由处理此事件。传递给window.postMessage()的参数（即“message”）通过事件对象暴露给接收窗口。

Nginx

通过配置nginx实现代理

在这里插入代码片server {
    listen    80;
    # server_name www.josephxia.com;
    location / {
        root  /var/www/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass  http://127.0.0.1:3000;
        proxy_redirect   off;
        proxy_set_header  Host       $host;
        proxy_set_header  X-Real-IP     $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}

开发环境跨域

代理proxy 本质上也是cors
项目根目录下的vue.config.js中添加以下代码(如果没有该文件可以手动创建)：

amodule.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 8084,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }
}

JSONP跨域
jsonp的原理就是利用

生产环境跨域

JSONP跨域
Nginx