Vue项目总结（3）-跨域问题分析

先后端分离的一个好处是能够将前端和后端运行环境分开，各自进行管理和优化，增长了系统部署的灵活性和弹性。可是，这也带来了浏览器跨域资源共享（CORS）问题，致使浏览器没法访问后端服务。本文搭建一个简单示例（vue+json-server+nginx）说明该问题以及解决方法。

什么是CORS

跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不一样源服务器上的指定的资源。当一个资源从与该资源自己所在的服务器不一样的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

好比，站点 domain-a.com 的某 HTML 页面经过  的 src 请求 domain-b.com/image.jpg。网…

出于安全缘由，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

参考：developer.mozilla.org/zh-CN/docs/…

演示项目

建立项目

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.

注意：测试浏览器有可能会缓存结果，须要关闭缓存。

解决方案

有两种解决方式：一、修改业务代码，直接支持CORS；二、经过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”。

参考：www.npmjs.com/package/cor…

参考：www.npmjs.com/package/@ko…

利用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则能够，其余值均不能够。

参考：developer.mozilla.org/zh-CN/docs/…

前端代码与运行环境解耦

弄清楚了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文件，具体参考官网文档），指定相应的环境变量后，须要进行编译造成和环境绑定的发布版本。这样就实现了编码阶段不须要硬编码服务地址，编译时再根据须要指定。

参考：cli.vuejs.org/zh/guide/mo…

总结

利用nginx能够很好地解决跨域和内外网隔离问题，因此建议优先考虑采用nginx。若是彻底是在内网环境，能够在后端服务上增长CORS支持。

编写前端代码时，应规划好须要访问哪些服务，经过设置环境变量，避免对后端地址硬编码。

本系列其余文章：

Vue项目总结（1）-基本概念+Nodejs+VUE+VSCode

Vue项目总结（2）-前端独立测试+VUE