node.js带cookie的跨域请求

最近在做vue的项目用node.js写的后台接口,在接数据的时候出现一个跨域的问题,后来想了很久才发现在自己封装的axios请求中设置了传入后台需要带cookie凭证,在默认情况下请求浏览器不会携带凭证信息,而我在每次的请求中都带有cookie,因此每一次的请求都会被浏览器拦截。在这里,前端使用的端口号为8080,后端为8088。
报错信息如图显示:
在这里插入图片描述这里报错的意思是当请求的凭证模式为‘include’时,响应中的‘Access-Control-Allow-Origin’报头的值不能是通配符‘*’。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

以下是封装的axios
在这里插入图片描述withCredentials这里设置了true,让每次请求都带有cookie凭证

解决方法有三种:
方法一:我这里使用的是axios可以把withCredentials设置为false,这样每一次的请求就不会带上cookie凭证 (并不推荐使用, cookie是用来辨别用户的一个凭证,大家都知道http是无状态的,每次请求都是独立的,是没办法直接判断某个请求是否是同一个用户发起, 这时候cookie就起作用的,当用户第一次登陆这个网站的时候可以在响应头设置一个cookie, 下次用户在发起http请求就会自动带上这个cookie,服务器就可以通过这个cookie来找到这个用户的信息。)

方法二:
在后端使用cros中间件

//需要安装并且引入中间件cors
const cors = require('cors');

var corsOptions = {
  origin: 'http://localhost:8080',
  credentials: true,
  maxAge: '360000'
  //这一项是为了跨域专门设置的
}
app.use(cors(corsOptions))
//设置跨域

方法三:不适用中间件,设置请求头部
在这里插入图片描述Access-Control-Allow-Origin不能是*号.。设置成请求的来源,然后Access-Control-Allow-Credentials设置为ture, 这样浏览器就不会拦截服务器设置的cookie了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在nginx上配置node.js跨域,可以使用nginx的反向代理功能。以下是一个示例配置: ```nginx server { listen 80; # 配置允许跨域请求的域名 add_header 'Access-Control-Allow-Origin' 'http://yourdomain.com'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Headers' 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; location / { # 配置反向代理到node.js服务器的地址和端口 proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 配置允许WebSocket跨域请求 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } ``` 上述配置会在nginx服务器上监听80端口,将所有请求代理到node.js服务器的3000端口,并添加允许跨域请求的header信息。其中`Access-Control-Allow-Origin`配置了允许跨域请求的域名,`Access-Control-Allow-Methods`配置了允许的请求方法,`Access-Control-Allow-Credentials`配置了是否允许发送cookie等凭证信息,`Access-Control-Allow-Headers`配置了允许的请求头信息。此外,还配置了允许WebSocket跨域请求的相关信息。 你可以将以上配置保存为一个nginx配置文件,然后使用`nginx -c /path/to/nginx.conf`命令启动nginx服务器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值