Vue跨域问题的解决方法（前后端&express、koa）

在刚接触Vue时，经常会遇到跨域的问题，本文提供两种解决方法。

问题背景

跨域是什么：
跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

为什么会产生跨域的问题：
跨域问题的出现，是因为浏览器的同源策略对ajax、axios等请求进行阻拦了，但是并不是所有的请求都被当做跨域，例如一般的href属性，a标签都不进行拦截。
同源策略是一种约定，它是浏览器最核心也会是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。它约定请求的url地址，必须与浏览器的url地址处于同域上，也就是域名，端口，协议都相同。如果不同，就会报错。
Vue采用了前后端分离的模式。而前后端分离的好处是可以将前端和后端运行环境分开，各自进行管理和优化，增加了系统部署的灵活性和弹性。但是，这也带来了跨域的问题，导致浏览器无法访问后端服务。

解决方法1.前端配置代理

在项目中，打开config/index.js文件，找到proxyTable。
修改内容为：

proxyTable: {
  '/api': {
    target:'http://127.0.0.1:8080',//例，要访问的服务器地址
    changeOrigin:true,
    pathRewrite:{
      '^/api': ''//在代码中使用/api就会转发到http://127.0.0.1:8080
    }
  }
},

打开main.js文件，设置全局的axios配置：
(axios：一个基于 promise 的 HTTP 库，基本用于Vue项目中向服务端发起请求。)

import Axios from 'axios'

Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'

组件中调用、发送请求

//"/api/getData"请求将被转发到"http://127.0.0.1:8080/getData"
this.$axios.get("/api/getData")
.then(res=>{
	console.log(res)
})
.catch(err=>{
	console.log(err)
})

注：此方法多用于前端，只是解决了开发环境的跨域，线上依然会产生跨域的问题。

解决方法2.后端配置

例1：express，在app.js的路由配置加入以下内容：

var express = require('express');
var app = express();
//设置允许跨域访问
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});
...
app.get('/getData', function(req, res) {
    res.send({id:req.params.id, name: req.params.password});
});
...
app.listen(8080);
console.log('Listening on port 8080...');

例2：koa，引入 koa-cors 并且配置中间件

var Koa = require('koa');
var cors = require('koa-cors');

var app = new Koa();
app.use(cors());