vue开发环境和生产环境里面解决跨域的几种方法

什么是跨域

  跨域指浏览器不容许当前页面的所在的源去请求另外一个源的数据。源指协议，端口，域名。只要这个3个中有一个不一样就是跨域。 这里列举一个经典的列子：

#协议跨域
http://a.baidu.com访问https://a.baidu.com； #端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80； #域名跨域 http://a.baidu.com访问http://b.baidu.com； 

  如今不少公司都是采用先后分离的方式开发。那么出现常常和会跨域打交道。我这里整理平常开发中解决跨域的几种方案。咱们前端使用的Vue，后端使用的NodeJs。

解决方案

proxyTable

  这里vue脚手架生成的标准项目为准。通常在项目config目录下面有个index文件。里面格式以下：

'use strict' const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:7001',//后端接口地址 changeOrigin: true,//是否容许跨越 pathRewrite: { '^/api': '/api',//重写, } } }, host: '192.168.0.104', port: 8081, autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, useEslint: true, showEslintErrorsInOverlay: false, devtool: 'eval-source-map', cacheBusting: true, cssSourceMap: false, }, } 

  上面配置中，咱们根据实际状况只须要修改proxyTable对于配置便可。假设我后端请求地址是http://localhost:7001，全部api的接口url都以/api开头。因此首先须要匹配全部以/api开头的.而后修改target的地址为http://localhost:7001。最后修改pathRewrite地址。将前缀 '^api' 转为 '/api'。若是自己的接口地址就有 '/api' 这种通用前缀，就能够把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。

CORS

  CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来肯定是否容许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地容许全部这些的要求来讲更加安全。可是CORS也具备必定的风险性，好比请求中只能说明来自于一个特定的域但不能验证是否可信，并且也容易被第三方入侵。 这里通常须要后端配合,开启cors。通常各类语言都有相似的包。好比NodeJS的koa2-cors

var koa = require('koa'); //npm install --save koa2-cors var cors = require('koa2-cors'); var app = koa(); //开启 app.use(cors()); 

这个方式解决的跨越问题支持开发和生产环境。可是有必定的安全性问题。

Nginx

  当咱们明白跨越的含义以后。只要解决了'源'的问题。那么跨越也就不存在了。这里咱们便会想到proxy，同时也会想到Nginx。

咱们只须要在部署静态资源配置下面加上红框里面的配置就能够了。同时这个方法支持开发环境和生产环境。

后端程序代理

  固然上面2个方法都须要后端的配合和须要修改服务器配置。全部还有一种方法不须要他们配合 ，咱们本身就能够作到。就是咱们本身启一个后端程序作代理。而后把全部的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)以下

  上面4种方式都能解决vue跨域问题。固然确定还有别的方式。至于在生产环境中怎么部署须要各位本身去衡量了。同时也但愿你们给出更好的解决方案。