项目介绍：
前端项目是由vue脚手架4版本搭建的，支持vue2.0?gitee项目地址
后端是nodejs项目，做了路由处理，可操作数据库。项目地址gitee项目地址
?遇到问题：
前后端项目运行起来后，前端调用接口，后端api地址是localhost:3000,前端地址是localhost：8080，很显然跨域了。
处理思路：前端带代理，后端nginx代理
【我是个前端开发，最近也是在摸索学nodejs，后端这里如果有写的不对的地方，大家评论区指出，栓Q】
方法一：axios.defaults.withCredentials = false //表示跨域请求时是否需要使用凭证
这个是请求接口封装时候通常会设置的，要注意这个属性的意思是表示跨域请求时是否需要使用凭证。这个使用前提是什么，你不会给后端服务传递Cookie和HTTP认证信息，这说明如果项目设计登录校验之类的，就没什么用了。
?方法二：这个是前端开发最常用的vue.config.js中做代理，这是前端最常见的处理方法，还有一个jsonp之前做H5项目也用过，也可以解决跨域问题，等有时间给补充进来。
//配置文件vue.config.js
proxy: {
'/api':{
target:"http://127.0.0.1:3000",
changeOrigin:true,
secure:false,
pathRewrite:{
"^/api":""
}
}
},
//使用时候可以在接口封装文件中index.js
axios.defaults.baseURL='/api'
const get=function(url, params = {}) {
console.log(url);
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
//引用
getList(){
this.$http.get('/user/list').then((result) => {
console.log('====================================');
console.log(result);
console.log('====================================');
}).catch((err) => {
console.log(err);
});
}
方法三：nginx反向代理，对nginx不理解的可以nginx知识点看一下这个，通俗的描述nginx在做什么，我找仓库获取资料，但是有大门锁着，并且我也不知道我要的资料放在仓库的那个位置，所以我要找一个中转员，代替我去找。所以在项目中实现就是，项目中地址会指向nginx server中的一个地址，server中的proxy_pass会指向后端服务地址。
//接口封装文件
axios.defaults.baseURL = 'http://localhost:8084/api' // 默认baseUR
axios.defaults.withCredentials = true修改到这里运行项目，浏览器会提示跨域啦。
接下来重点就是nginx.conf文件配置
# 自测试代理地址
server {
listen 8084;
server_name localhost;
index index.html;
charset utf-8;
add_header Access-Control-Allow-Origin http://localhost:8080;
add_header Access-Control-Allow-Credentials true;
location /api {
if ( $request_method = 'OPTIONS' ) {
return 200;
}
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000/;
}
}add_header Access-Control-Allow-Origin 允许跨域请求的地址写，前端地址譬如我这里是localhost:8080启动项目，就写这个没问题。
add_header Access-Control-Allow-Credentials，跟前端项目中设置对应起来，如果前端定义了axios.defaults.withCredentials = true，nginx配置文件里面一定要加add_header Access-Control-Allow-Credentials true;如果前端axios.defaults.withCredentials = false，nginx配置文件加不加就无所谓了。
?nginx配置文件编写完，记得重新运行一下。跨域问题解决了
观察一下请求，我们能看到nginx代理服务器给返回的几项设置，绿色地址对应起来Origin是浏览器识别的当前项目地址，Access-Control-Allow-Origin是在nginx配置文件中设置的。这里我试过通配符 * 不管用。这个对应的问题，上面推荐的几个文章中好像有提到哦，点进去阅读一下哦。
本次测试主要就是想了解一下前后端请求的配合问题吧，作为一个前端之前也遇到后端让你做跨域代理什么的。项目大家可以拉下来看看哦，不清楚的请留言！