前后端分离的一个好处是可以将前端和后端运行环境分开，各自进行管理和优化，增加了系统部署的灵活性和弹性。但是，这也带来了浏览器跨域资源共享（CORS）问题，导致浏览器无法访问后端服务。本文搭建一个简单示例（vue+json-server+nginx）说明该问题以及解决方法。
什么是CORS
跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
比如，站点 http://domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。
出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。
参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
演示项目
创建项目
vue create try-cors
创建测试服务
在项目下创建放测试数据的目录json-server，在目录下创建文件db.json文件。
{
"hello": {
"id": 1,
"msg": "你好，我是json-server"
}
}
启动模拟API服务，通过参数指定测试数据的位置和服务的端口。
npx json-server json-server/db.json --port 4001
在浏览器地址栏中输入http://localhost:4001/hello，检验是否启动成功。
引入axios包，修改项目代码
cnpm i axios -S
修改App.vue文件，引入axios。
<template>
<div id="app">
<button @click="sendRequest">发送请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'app',
methods: {
sendRequest() {
let api_url = 'http://localhost:4001/hello'
axios.get(api_url).then(rsp => {
alert(JSON.stringify(rsp.data))
})
}
}
}
</script>
运行
在浏览器中打开页面，点击【发送请求】按钮，成功返回结果。这时并没有因为跨域的问题导致请求失败，这是因为json-server默认是开启支持CORS。
启动json-server时添加参数--no-cors或--nc。
npx json-server json-server/db.json --port 4001 --nc
在浏览器中打开页面，打开【开发者工具】，点击【发送请求】按钮，查看请求执行的结果。
Access to XMLHttpRequest at 'http://localhost:4001/hello' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
注意：测试浏览器有可能会缓存结果，需要关闭缓存。
解决方案
有两种解决方式：1、修改业务代码，直接支持CORS；2、通过nginx进行代理，支持CORS。
修改后端代码
json-server通过指定参数开关CORS就是一种后端解决方案。cors是express的中间件（koa用的是@koa/cors），可以设置各种CORS选项。下面代码是一种最简单的设置。
cors({
origin: true,
credentials: true
})
json-server支持CORS后，我们在浏览器的开发者工具中观察响应头，会看到如下内容：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8080
服务器端添加这两个头就是告诉浏览器，“我支持CORS”。
参考：https://www.npmjs.com/package/cors
参考：https://www.npmjs.com/package/@koa/cors
利用nginx代理
关闭json-server对CORS的支持，将端口改为4002。
npx json-server --port 4002 --nc json-server/db.json
启用nginx，开启4001端口，反向代理到4001端口。
server {
listen 4001;
server_name localhost;
location / {
proxy_pass http://localhost:4002;
}
}
在浏览器中调用请求，返回失败。
修改nginx配置文件，直接加头。
server {
listen 4001;
server_name localhost;
location / {
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin http://localhost:8080;
proxy_pass http://localhost:4002;
}
}
Access-Control-Allow-Credentials 响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。
参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials
前端代码与运行环境解耦
弄清楚了CORS，我们研究一下真实的部署问题。
需要和前后端代码分离一同考虑的问题是，后端代码的微服务化，也就是一个前端要访问多个独立部署的后端服务，例如：独立的登录鉴权服务，独立的日志服务。
Server1到Server4是4个独立的服务环境，前端代码部署在Server1，不同的后端服务分别部署在Server2到Server4，用户通过浏览器访问Server1获得前端代码，浏览器中执行前端代码访问Server2-Server4。Server2到Server4是3个不同地址，前端代码需要分别指定，这就导致前端代码依赖运行环境的问题。
除了由于前后端代码单独部署导致的代码依赖运行环境，另一个问题是内外网隔离。业务服务器都部署在内网，只暴露一个出口（互联网ip+端口），这种情况下，如果前端代码中写的是内网服务的地址肯定访问不了。
综合前后分离和内外隔离两方面的需求，编写前端代码时必须实现一种机制，避免在代码中硬编码后端服务地址，应支持根据具体的部署环境进行指定。
用vue开发时，可以通过指定环境变量的方式实现上面的要求。
在项目的根目录下创建.env，.env.local等文件指定环境变量，注意环境变量必须以VUE_APP_开头，例如：
VUE_APP_SERVER2=xxxx
VUE_APP_SERVER3=yyyy
VUE_APP_SERVER4=zzzz
在代码中通过process.env访问：
console.log("VUE_APP_SERVER2", process.env.VUE_APP_SERVER2)
console.log("VUE_APP_SERVER3", process.env.VUE_APP_SERVER3)
console.log("VUE_APP_SERVER4", process.env.VUE_APP_SERVER4)
这种方式并不是在运行时使用环境变量，而是在编译时用定义的值替换代码中的环境变量。所以，针对不同的部署环境（可以给不同环境指定不同名称的env文件，具体参考官网文档），指定相应的环境变量后，需要进行编译形成和环境绑定的发布版本。这样就实现了编码阶段不需要硬编码服务地址，编译时再根据需要指定。
参考：https://cli.vuejs.org/zh/guide/mode-and-env.html
总结
利用nginx可以很好地解决跨域和内外网隔离问题，所以建议优先考虑采用nginx。如果完全是在内网环境，可以在后端服务上增加CORS支持。
编写前端代码时，应规划好需要访问哪些服务，通过设置环境变量，避免对后端地址硬编码。
