vue axios跨域异常 Access-Control-Allow-Origin wildcard '*' mode is include withCredentials attribute
最新推荐文章于 2023-05-09 09:41:00 发布
最新推荐文章于 2023-05-09 09:41:00 发布
vue在request时错误信息如下，做此记录：
Access to XMLHttpRequest at 'http://192.168.0.103:8080/user/userLogin' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check:
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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute
.
Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action?
That works only in dynamic modules.
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]
原因：得知当请求的凭证模式为'include'时'Access-Control-Allow-Origin'
头的值不能为通配符
'*'
，这里面有一个关键字就是属性值
withCredential
，原因就是前后端对该项的设置没有统一。
同域安全策略CORS（Cross-Origin Resource Sharing）
它要求请求的服务器在响应的报头（Response Header）添加 Access-Control-Allow-Origin标签，从而允许此标签所对应域访问此服务器的资源，调用此服务器的接口。
默认情况下请求不提供凭证，通过对
withCredential
的设置可以控制是否发送凭证。
如果发送的是带凭证的请求，但服务器响应中没有包含这个头部，那么该响应会被浏览器拦截，因此在需要传Cookie等时，服务端的Access-Control-Allow-Origin必须配置具体的域名。
如果服务器接收带凭证的请求会用Access-Control-Allow-Credentials:true的HTTP头部进行响应。
解决：前后端origins配置一致即可，凭证模式通过withCredentials 这个属性控制。个人后端使用的java springboot，先增加对跨域的设置@CrossOrigin(origins = "*", maxAge = 3600)，并去掉前端(axios)设置项withCredentials: true。
vue axios跨域异常 Access-Control-Allow-Origin wildcard '*' mode is include withCredentials attribute
vue在request时错误信息如下，做此记录：Access to XMLHttpRequest at 'http://192.168.0.103:8080/user/userLogin' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request does...
:gem_stone: 基于前端访问控制框架的
Vue
Vue
-
Access
-
Control
是基于
Vue
/
Vue
-Router /
axios
的前端用户权限控制解决方案，通过对路由，视图和请求的三个级别的控制，开发人员可以实现任何粒度的用户权限控制。
管理功能可以参考项目。
主页： ：
git： git clone https://github.com/tower1229/
Vue
-
Access
-
Control
.git
测试帐号：
1. username: root
password: any password
2. userna
本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。
React单元测试实践
单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。单元测试是由程序员自己来完成，最终受益的也是程序员自己。执行单元测试，就是为了尽量证明这段代码的行为和期望的一致。
其实我们每天都在做单元测试，包括那些认为自己从来没有写过单元测试的同事。你写了一个函数，log一下或者在界面上点一下，这，也是单元测试，把这种单元测试称为临时单元测试。临时单元测试.
如a.123.com
跨域
访问b.123.com/request、
b.123.com服务器使用nginx允许
跨域
，
Access
-
Control
-
Allow
-
Origin
：*
如果a、b服务不在同一个服务器
前台页面请求报错信息为：
Access
to XMLHttpRequest at 'http://b.123.com'
from
origin
'http://a.123.com'...
遇到的问题
Access
to XMLHttpRequest at ‘http://localhost:8081/order/no’ from
origin
‘http://localhost:8080’ has been blocked by CORS policy: No ‘
Access
-
Control
-
Allow
-
Origin
’ header is present on the requested resource.
翻译：通过CORS策略已阻止从源"http:// localhost:8080"
一、报错：
No ‘
Access
-
Control
-
Allow
-
Origin
’ header is present on the requested resource.
Origin
‘null’ is therefore not
allow
ed
access
二、分析：
在请求服务器的 header 里没有标注：“
Access
-
Control
-
Allow
-
Origin
”，所以拒绝显示数据
1：服务器端设置
跨域
header(“
Access
-
Control
-
Allow
-
Origin
:*”);
header(“
Access
-
Control
-
Allow
-Headers:content-type”);
header(“
Access
-
Control
-Request-Method:GET,POST”);
2：可以自己设置一个代理服务器，使用proxyTable 我比较推荐这种方法。
首先在config/index.js 里面找到proxyTable ：{} ，然后在里面加入
“/api”
