https://www.my.com/api
https://api.my.com

同站，可以共用一个cookie
但不同源（协议、主机均不同），有跨域限制

跨域 cross-origin

产生原因：浏览器的同源策略SOP(Same-origin policy)。注意：服务器没有跨域限制。

即协议protocol、主机port、端口host有任一不同，就会限制资源交互，主要包括：

• cookie、localstorage、indexdb无法获取
• dom无法获得
• ajax请求无法发送

区分：跨站 cross-site

跨站，即 eTLD+1 不同（有效顶级域名+二级域名）

第一方、第三方cookie，其实指的是否跨站。

跨域的解决方案

前后端分离项目会经历三套环境：开发环境、测试环境、生产环境，会遇到不同的跨域情况。

开发阶段

项目运行，启动一个本地开发服务器（基于webpack-dev-server，提供本地服务，仅适用于开发环境），独立运行在一个端口上。

Eg.
前端：localhost:8080
后端：localhost:3000
请求地址：localhost:3000/api/xxx

• Node中间件正向代理（webpack、vue-cli等） 在devServer配置proxy，添加一个虚拟的中间代理服务器，转发请求。

生产阶段

前后端分离项目

• 前端：展示数据。可以是 web 端、小程序端、移动端
• 后端：提供接口 部署方案与跨域解决
• 不存在跨域：前端dist复制到后端项目中，作为后端项目的静态资源，部署后端项目到服务器。
• nginx反向代理：前端dist部署到nginx，配置代理转发请求到后端。