我是靠谱客的博主 称心烧鹅,这篇文章主要介绍html+js 解决跨域访问带cookie的问题,现在分享给大家,希望可以做个参考。

后台需要修改的部分

axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决。 这个时候需要注意需要后端配合设置:

  • header信息 Access-Control-Allow-Credentials:true

  • Access-Control-Allow-Origin不可以为 *,因为 * 会和 Access-Control-Allow-Credentials:true 冲突,需配置指定的地址

如果后端设置 Access-Control-Allow-Origin: ‘*’, 会有如下报错信息

Failed to load http://localhost:8090/category/lists: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. Origin ‘http://localhost:8081’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

后端配置缺一不可,否则会出错,贴上我的后端示例:

复制代码
1
2
3
4
5
6
7
8
9
10
const express = require('express') const app = express() const cors = require('cors') // 此处我的项目中使用express框架,跨域使用了cors npm插件 app.use(cors{ credentials: true, origin: 'http://localhost:8081', // web前端服务器地址 // origin: '*' // 这样会出错 })

前端需要修改的部分

使用axios

这里以用户登陆为例子,需要执行一个post请求,发送用户名+密码
关键代码

复制代码
1
2
axios.defaults.withCredentials=true;

完整代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function login_fun(){ var userName = document.getElementById("name").value; var password = document.getElementById("password").value; console.log(userName); console.log(password); userName = parseInt(userName); let url_login = 'http://139.199.166.124:8080/login'; axios.defaults.withCredentials=true; axios.defaults.timeout = 6000; // axios.defaults.headers.post['Content-Type']='text/plain'; axios.post(url_login, JSON.stringify({ "id": userName, "password": password })) .then(function(res){ console.log(res);//处理成功的函数 相当于success window.parent.location.href = "/HomePage"; }) .catch(function(error){ console.log('fail'); console.log(error);//错误处理 相当于error })

使用ajax

同样是执行一个间段的post请求
关键代码

复制代码
1
2
3
4
5
xhrFields: { withCredentials: true // 要在这里设置上传cookie }, crossDomain: true,
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$.ajax({ type: "post", dataType: 'json', url: "http://139.199.166.124:8080/login", //lt xhrFields: { withCredentials: true // 要在这里设置上传cookie }, crossDomain: true, data: JSON.stringify({ "id": userName, "password": password }), success: function(data){ console.log('success'); console.log(document.cookie.length); window.parent.location.href = "/HomePage"; // window.open("/HomePage"); }, error: function(Request, status, msg){ console.log(Request); console.log(status); console.log(msg); console.log('fail'); } });

参考博客
1. 浏览器跨域请求之credentials
2. axios的cookie跨域以及相关配置

最后

以上就是称心烧鹅最近收集整理的关于html+js 解决跨域访问带cookie的问题的全部内容,更多相关html+js内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(67)

评论列表共有 0 条评论

立即
投稿
返回
顶部