Vue项目总结（3）-前后端分离导致的跨域问题分析

2019-11-05 本文已影响0人全栈顾问

前后端分离的一个好处是可以将前端和后端运行环境分开，各自进行管理和优化，增加了系统部署的灵活性和弹性。但是，这也带来了浏览器跨域资源共享（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，我们研究一下真实的部署问题。

需要和前后端代码分离一同考虑的问题是，后端代码的微服务化，也就是一个前端要访问多个独立部署的后端服务，例如：独立的登录鉴权服务，独立的日志服务。

image.png

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