前言：我们项目是vue2.5.2版本。项目中由两部分接口，一部分是我们自己的，还有一部分是甲方的，用来接入甲方的登录校验。甲方需求是做代理访问后端接口，并且不能暴露接口的请求路径。我们的方案实现的并不完善，这篇文章主要是用来记录一下过程。
1.最初的方案
需求1：两部分接口都可以实现。
//自己的接口
/api.js
axios.defaults.baseURL = 'http://服务器/app'
let timeout = { timeout: 15000 };
let runtimeout = { timeout: 180000};
//用户注册
export const register = params => { return axios.post('/app/user/regiester',param,timeout)}
/regieter.vue
import { register } from "../Api/api";
register(params).then(res => {
...
})
//甲方的接口
/接入.vue
getAccount(){
let axios1 = axios.create({baseURL: ""})
axios1.get('/api/account').then(res => {
console.log(res);
})
\config\index.js
proxyTable: {
"/api": {
target: "http://api.com",
changeOrigin: true
},
},
\build\webpack.dev.conf.js
devServer: {
proxy: config.dev.proxyTable,
...
}
- 这里之所以写了webpack.dev.conf.js只因为我们最开始把proxy这段语句注掉了，重写和index.js里面的一样的语句，也是可以实现的。这样的话index.js里面就不用写了。
- 一个师兄的解释是：config文件夹下，是vue针对webpack封装的配置，所以配置是随着vue-cli的设置来的，同时vue提供了你直接使用webpack配置的能力，这样webpack配置放在了build文件夹下。所以现在相当于绕过了vue框架，直接修改了webpack的配置，没有使用它提供的接口。官网
缺点：这样不会隐藏我们接口的服务器地址。在本地打开的接口效果还是http://服务器/app/app/user/regieste
2.给自己的接口设置代理
其实很简单，就是把api.js里面的baseburl注掉，在index.js文件夹下也写proxyTable。
'/hustdam':
{
target: 'http://服务器/app',
changeOrigin: true,
pathRewrite: {
'^/app':''
},
},
这样本地跑的时候，所有接口的统一前缀为http://localhost:8080/接口
问题：部署到服务器上时，会报错405.
3.进一步解决服务器部署的跨域问题
以上在index.js文件里面做修改的时候，只能解决npm run dev 的时候的跨域问题。在npm run build打包部署到服务器上时还是会出现跨域的问题。
解决方案：在nginx做配置
location /api {\
proxy_pass http://ap.com:80;\
# proxy_set_header Origin "http://api.com";\
proxy_set_header X-Real-IP $remote_addr;\
proxy_set_header Connection "keep-alive";\
} \
location ^/app/ {\
proxy_pass http://服务器:8090;\
}
坑：我们项目为了解决两方接口的问题，在自己的接口前面统一加上加上/app，但是我们的http端口号后面也有一个app，方便作为甲方的网页一个功能模块，但是刚开始写的时候要加上两个/app。所以在写的时候要小心。
4.理论补充
- 同源策略
- 反向代理是跨域的一种解决方法。
- 看到一张有意思的图来解释反向代理。(侵删） 正向代理隐藏真正的客户端，反向代理隐藏真正的服务端。
