Vue项目（vue-cli）和 node后台跨域（CORS）的问题

参考了这两篇博文，很是简单明了，感谢：
https://www.jianshu.com/p/2f73c9c6ceb6
https://blog.csdn.net/qq_42172829/article/details/83655889

更详细规范讲解：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
http://www.ruanyifeng.com/blog/2016/04/cors.html

下面是我在自己写的小项目中的实践，做一个笔记来梳理理解一下：

为什么会出现跨域？因为不同源，所谓同源就是：同协议，同域名，同端口
自己的小项目前端 Vue ：http://localhost:8080 ,node后台：http://localhost:3000
端口号不一样，显然是浏览器是要进行本地跨域访问node后台的。
网上查找了解决方案，

【方式一：直接前端设置代理即可】
vue-cli搭建vue项目框架的 config → index.js → dev 配置代理
在这里插入图片描述
通过设置代理，将后台的地址http://localhost:3000配置成‘/api’，即用“/api” 代替 target里面的地址。
我使用的是 axios 来发送请求，可以在请求之前设置默认的配置，比如 baseURL, timeout，headers等等。
于是，我在配置 axios的时候，将 baseURL设置成 “/api” baseURl :"/api
【这里我踩了个坑，怪自己没有理解代理】，我在配置代理的时候，也设置了 pathRewrite，将“/api”又重写成 “ ” (为空) , axios 的baseURL 还是“/api” 所以一直报错。尴尬~~~

【方式二：后台允许跨域】我这里是 node后台

var express = require("express");
var app = express();

app.use((req,res,next)=>{
   res.header("Access-Control-Allow-Credentials", "true"); 
// res.header('Access-Control-Allow-Origin', '*');
　　res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
　　res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
　　res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
　　if (req.method == 'OPTIONS') {
　　　　res.send(200); /*让options请求快速返回*/
　　} else {
　　　　next();
　　}
})

【浏览器端向服务器端发送cookie的条件】：CORS（跨域资源共享）请求默认不发送 cookie和http认证信息，服务器端Access-Control-Allow-Credentials 设置为 ture 表示服务器同意，与此同时前端开发者必须在AJAX请求中打开withCredentials 属性，withCredentials = ture 才行，否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。
但是，如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。
【注意】一旦服务器设置 Cookie，‘Access-Control-Allow-Origin’ 就不能设置为 ‘*’ ，必须设置成你请求的IP地址，协议+域名+端口号，这里是：http://localhost:8080

【方式三：后台引入 Node cors模块】

npm install cors --save

var express =require('express');
var app =express();
var cors = require('cors');

// 全局配置
app.use(cors());

此模块也可以，当做路由中间件，指定某一个，或者某一部分路由，拥有跨域功能。举例：

var express = require('express');
var app = express();
var cors = require('cors');
var corsOptions = {
  origin: 'http://www.baidu.com', //只有百度可以访问
  optionsSuccessStatus: 200 
}
// 指定的路由可以跨域访问
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: '只有百度可以访问'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Vue项目（vue-cli）和 node后台跨域（CORS）的问题

猜你喜欢