同源策略

常见的跨域解决方案 CORS、Proxy ，其它都是扯淡。

浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。

• 请求协议 http,https 的不同
• 域 domain 的不同
• 端口 port 的不同

CORS

来自于 W3C 的标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

简单请求

什么是简单请求

• 请求方式只能是：head，get，post
• 请求头允许的字段：Accept，Accept-Language，Content-Language，Last-Event-ID
• Content-Type 的值只能是 application/x-www-form-urlencoded、multipart/form-data、text/plain

处理方式

• 服务器检查当前请求的origin与access-control-allow-headers是否匹配，如果匹配，则允许跨域请求。
• Access-Control-Allow-Credentials: true 表示是否可以将对请求的响应暴露给页面。

复杂请求

什么是复杂请求

不满足简单请求的都是复杂请求。

处理方式

浏览器会先发送 option（预检）请求，预检请求通过后才会发起正式请求。

Proxy

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。

这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
  devServer: {
    proxy: "http://localhost:4000"
  }
};

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:4000。

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

module.exports = {
  devServer: {
    proxy: {
      // 请求的url中，遇到 /api 开头的请求，则代理到 <url>
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true
      },
      "/foo": {
        target: "<other_url>"
      }
    }
  }
};