跨域解决方案：JSONP、CORS与Vue-cli代理-优快云博客

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

什么是同源：

所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

一、JSONP解决跨域：

1，什么是JSONP：

JSONP(JSON with Padding)是 json 的一种"使用模式"，可以让网页从别的域名（网站）那里获取资料，即跨域读取数据。

1，基本原理：

img 和 script 标签的 src 属性和 link 标签的 href 属性不受同源策略的影响，jsonp跨域就是动态生成一个script标签来请求后台接口，标签的src属性就是接口的url。定义一个接收响应数据的函数，并将函数名作为请求参数提交给后台。

2，注意：

(1）对方网站必须提供的是一个 jsonp 格式的接口。
(2）只能解决 get 类型的跨域请求。

二、CORS解决跨域：

1，什么是CORS：

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服 AJAX 只能使用同源的限制。

2，CORS的基本原理：

CORS 是一种基于 HTTP Header 的机制，该机制通过允许服务器标示除了它自己以外的其它域。服务器端配合浏览器实现 CORS 机制，可以突破浏览器对跨域资源访问的限制，实现跨域资源请求。

3，注意：

CORS需要浏览器和服务器同时支持。一些较老的浏览器不支持。

三、vue-cli中集成的方案解决跨域：

1，基本原理：

在前端服务和后端接口服务之间架设一个中间代理服务，它的地址保持和前端服务一致。代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求。

2，实现方法：


module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}