前后端分离，解决vue+axios跨域和proxyTable不生效等问题
看到我这篇文章前可能你以前看过很多类似的文章。至少我是这样的，因为一直没有很好的解决问题。
正文
当我们通过webstorm等IDE开发工具启动项目的时候，通过命令控制台可以观察到启动项目的命令
如下：
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
我们很容易发现，用到了一个配置文件build/webpack.dev.conf.js
我因为实在逼得找不到原因，明明按照网上的文章配置的，但是跨域依旧没解决，总会遇到各种各样的问题。
不得已之下，看了下项目的启动配置文件。看完后，感觉自己搞懂了怎么回事，有感。
开始
首先我们要确认后端的跨域是允许的。
首先确保后端跨域没问题，目的是解决前端的问题
Springboot为例可以通过下面注解允许某个接口（注解方法上与@RequestMapping，@GetMapping等相关注解一起使用），或一批接口（注解在类上）
@CrossOrigin(originPatterns = "*", allowCredentials = "true", origins = "*")
如果是springsecurity 登录接口，简单代码片段列举，通过csrf().disable() 去允许接口可以跨域
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
随着版本的迭代有些配置可能会变更，我们可以通过观看源码找到那些内容发生了变更，然后自己尝试去解决问题。
在网上你会看到各种各样的文章，有人说是改config/vue.config.js，也有人说是改config/index.js 去解决跨域问题。
以我这里为例子，会发现项目中没有vue.config.js与网上某些文章不一样。
通过观看build/webpack.dev.conf.js 源码
截取部分源码，会发现require('../config')引入了config/index.js
最主要的是我们看到了源码中有config.dev.host等相关的内容，
其中我们发现代理相关的词proxy: config.dev.proxyTable, 从这里我们就可以知道用的是proxyTable的配置来代理后端解决跨域问题。
如果你发现项目用的名称不叫 proxyTable 只需要找到对应位置去修改就行了
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
我们确定了需要改的内容是config/index.js 中的 config.dev.proxyTable 字段配置
proxyTable: {
'/api': {
target: 'http://localhost:8081', // 你请求的第三方接口,后端地址
changeOrigin: true,// 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
ws: true,
pathRewrite: { // 路径重写，
'^/api': ''// 替换target中的请求地址
}
}
}
UI 的端口是8080，后台的端口是8081
我们希望用axios去访问8081返回我们想要的数据。
上面的配置意思是，会将 url 以/api 开头通过axios发送的请求会被拦截和代理。
例如我想访问后端的登录接口http://localhost:8081/user/login 去登录返回 token 和user的信息
一般我们会这样做
axios.post(
'/user/login',
this.loginForm,
{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.then(res => {
// TODO
})
如果代理没生效，那么它发的请求就是http://localhost:8080/user/login 不是我们期望的8081端口。
实际上代理生效后，通过浏览器的Network也看不出来访问的是8081的还是8080端口的。
你只能在Network中看到，request header是8080端口。
因此很多人搞不清。
通过后端打断点，我确认了该请求是否访问到后端api。
上述给的例子中是否有发现proxyTable中/api以及内部的pathRewrite配置，
但是我的axios请求中没有/api前缀，因此上述实际proxyTable并没有用，还需要给url带上/api前缀才可以代理生效
修改main.js加入下面片段，将前缀/api 通过总入口方式带入即可。（这样url就不要自己手动拼上/api）
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
Vue.config.productionTip = false
最后重启vue项目检验一下。
Header信息如下，8080是前端的端口，Request URL: http://localhost:8080/api/user/login这里只是显示成前端的8080，实际上调用的是8081后端的api http://localhost:8081/user/login 后端的springboot接口是@PostMapping("/user/login")
我们可以明显看到后端有返回json数据过来。
