the 'access-control-allow-origin' header has a value 'http://localhost' but origin is null

最新推荐文章于 2021-04-16 19:37:41 发布
原创 最新推荐文章于 2021-04-16 19:37:41 发布 · 8.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#the access-control-a

本文介绍了一种浏览器加载页面时遇到的originisnull错误，并分析了可能是由于目标文件redbag.html未被正确引用导致的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

出现的错误如下图所示：

报错分析：浏览器要打开的界面是redbag.html，但是报错origin is null，可能是这个路径还没有包括该文件。

解决：The 'Access-Control-Allow-Origin' header contains multiple values'x, *', but only one is allowed
11-29 3万+
一、问题 vue前端访问后台时报The ‘Access-Control-Allow-Origin’ header contains multiple values’x, *’, but only one is allowed. 错误 二、原因 这个是说Access-Control-Allow-Origin头检测到多个值，也就是跨域重复配置了，比如你要通过好几个其他的服务才能调用的你想要的服务（网...
【Vue-Spring跨域Bug已解决】has been blocked by CORS policy: The value of the······
一键难忘的博客
04-12 2585
这个报错提示是因为在跨域请求中，请求头中设置了 withCredentials 参数为 true，表示跨域请求需要使用凭证（如 cookies、HTTP 认证等）。而在响应头中，Access-Control-Allow-Origin 的值不能是通配符 *，必须是具体的域名。另外，如果你在发送跨域请求时需要携带 cookies 或其他凭证，还需要在请求头中设置 withCredentials 参数为 true。如果需要全局配置跨域支持，应该使用上一条回答中提到的方式，在配置类中设置。
解决'Access-Control-Allow-Origin' header has a value 'null'
鶸者为何战斗
04-05 1万+
这个的确是个很傻的问题。这个问题主要取决于你是怎么运行你的html的、如果你直接本地用浏览器打开，那么我可以告诉你，你分分钟就会产生上面的问题。 解决办法： 第一：用webstorm之类的ide运行。 第二：直接放到nginx上面去
前后端分离，解决跨域问题，并解决'Access-Control-Allow-Origin' header has a value 'null'报错
csdjia11的博客
08-28 1332
前后端分离，解决跨域问题，解决'Access-Control-Allow-Origin' header has a value 'null'报错
The 'Access-Control-Allow-Origin' header has a value 'http://localhost:28080' that is not equal to t
宋大王的博客
02-27 5743
记录一个问题 在学习shiro+cas 前后端分离单点登录过程中，遇到跨域重定向的问题 其中登录后，在访问cas客户端的controller时，浏览器出现了这个跨域问题 Access to XMLHttpRequest at 'http://127.0.0.1:18081/blog-backend/shiro/hello' (redirected from 'http://localhost:28...
解决The 'Access-Control-Allow-Origin' header has a value 'null' 问题
qq_35125915的博客
01-10 8999
当发送Ajax请求时，如果你在本地直接打开浏览器运行，肯定会出现此错误。 原因是没有相关运行环境（如Apache） 解决办法： 1. 代码放到服务器上 2.在本地使用开发环境（如wampserver）...
vue用axios进行token请求出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header的解决方案
FHlang的博客
04-16 4447
遇到的问题 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"
Access to XMLHttpRequest at 'http://192.168.2.230:9527/ws/info?t=1753344570460' from origin 'http://localhost:81' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
最新发布
07-25
我们正在解决WebSocket STOMP连接中的CORS问题，特别是当请求包含凭证（credentials）时，响应头`Access-Control-Allow-Origin`不能使用通配符`*`的问题。 根据引用[1]和引用[4]，当请求的`credentials`模式为`'...
Access to XMLHttpRequest at 'http://api.offical.ikaiyou.com/v1/accelerate/game/home_game_list' from origin 'null' has been blocked by CORS policy: Request header field sign is not allowed by Access-Control-Allow-Headers in preflight response.
06-25
错误信息 “blocked by CORS policy: Request header field sign is not allowed by Access-Control-Allow-Headers in preflight response” 表明服务器在预检响应中没有在 `Access-Control-Allow-Headers` 头部中...
const getName = () => { // 请求筛选项dalianTeam axiosGet("/user/total/getByNames?date=" + param, null, undefined, t, 'blob').then((res) => { console.log(res.data.data) let s1: any = [] res.data.data.forEach((e: { name: any; }) => { s1.push({ label: e.name, value: e.name, key: e.name }) }); setGetNameSelect(s1) }) }GET http://127.0.0.1:8080/user/total/getByNames?date=[object%20Object] net::ERR_FAILEDAccess to XMLHttpRequest at 'http://127.0.0.1:8080/user/total/getByNames?date=[object%20Object]' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
04-03
Header add Access-Control-Allow-Origin "*" ``` 2. **代理设置** - 使用前端框架提供的开发环境下的反向代理功能代替直连外部地址。如果是 Next.js 或 React 应用程序的话，可通过修改 `package.json` 文件内...
调接口报错The 'Access-Control-Allow-Origin' header has a value 'http://www.yemengs.cn'
Practice!
04-06 1123
用axios的时候请求数据出现错误：The ‘Access-Control-Allow-Origin’ header has a value ‘http://www.yemengs.cn’ 说跨域了，解决方法： <meta http-equiv="Access-Control-Allow-Origin" content="*"> ...
Failed to load http://localhost:3000/products: The 'Access-Control-Allow-Origin' header has a value
我的博客
02-12 1186
用node写了个接口，但是启动前端的时候一直请求不到数据，报错 Failed to load http://localhost:3000/products: The ‘Access-Control-Allow-Origin’ header has a value ‘http://127.0.0.1:3000’ that is not equal to the supplied origin. ...
Spring Cloud Gateway 处理重复Header的方法（CORS policy: The ‘Access-Control-Allow-Origin‘ header has a……
小单的博客专栏
08-30 7615
问题现状 首先发现问题的原始点是浏览器进行 ajax 请求的时候出现跨域问题，经查看请求报文和错误确定是 Access-Control-Allow-Origin 出现了多个值（浏览器目前是不允许的），其原因是是在 gateway 中配置过了 Access-Control-Allow-Origin，后端服务的开发人员也配置了 Access-Control-Allow-Origin，导致 response 在响应的时候 Access-Control-Allow-Origin 出现了多个值（不管两个值相同还是不同
arcgis for js 4.11加载server地图不出来出现The 'Access-Control-Allow-Origin' header has a value 'null'错误
weixin_39484674的博客
04-13 818
arcgis for js 4.11加载server地图不出来出现The ‘Access-Control-Allow-Origin’ header has a value 'null’错误 这几天一直在弄arcgis for js加载server服务这块，试了3.28、4.3/4.11这几个版本，在上一篇文章中使用前两个版本都以加载成功，但4.11使用同样方法却迟迟加载不出来，google了半天才...
Chrome浏览器访问任何服务器资源，解决Origin 'null' is therefore not allowed access.错误
石头也有呆毛~~
04-18 1万+
可以尝试加入新的插件： https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
Chrome 出现Origin null is not allowed by Access-Control-Allow-Origin.
w5167839的专栏
09-15 2125
Html5开发的过程当中，要在一个文件当中获取本地的json文件，但是出现了错误 Origin null is not allowed by Access-Control-Allow-Origin. 这是谷歌浏览器为了安全起见，不允许该操作 但是我们可以 右键谷歌浏览器--属性--在目标位置后边加上--disable-web-security 然后重启就行了
Chrome报错：Origin null is not allowed by Access-Cont
chuyingpiao0327的博客
10-22 665
1.问题场景 js中采用jQuery的$.getJSON或$.ajax等获取本地文件时，出现错误： 2.问题原因 Origin null is not allowed by Access-Control-Allow-Origin的意思是由于安全原因浏...
php origin null,Origin null is not allowed by Access-Control-Allow-Origin 解决方法
weixin_34539480的博客
04-01 506
使用xmlhttprequest获取服务数据时，在IE下能通过而在 chrome不能通过的问题，这就是所谓的跨域问题，什么是跨域呢？比较不规范但是通俗的说说法吧，比如你使 用chrome打开一个本地的html页面，那么我认为现在你的机器就是一个站点，这个html就是运行在这个站点上，如果你要在这个html页面中通过 xmlhttprequest获取百度的页面源码信息，就有点跨域的意思，这和你直接在...
chrome发起跨域ajax请求遇到 Origin null is not allowed by Access-Control-Allow-Origin 一解
热门推荐
superhoy的专栏
09-05 3万+
在Chrome浏览器中，如果想通过AJAX请求不同域中的资源，很可能就会遇到 “Origin null is not allowed by Access-Control-Allow-Origin” 的错误。 这是因为在新版本浏览器中安全策略引起。简单的说，如果XMLHttpRequest 请求的URL和当前页面不同一个域中时，浏览器会检测响应http header中有没有 Access-Co
has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://27.50.29.194:18080' that is not equal to the supplied origin.
05-28
### 解决CORS跨域问题：正确配置`Access-Control-Allow-Origin`头 当浏览器发起跨域请求时，如果请求的凭证模式（`credentials mode`）设置为`include`，服务器响应头中的`Access-Control-Allow-Origin`不能使用通配符`*`。这是由于CORS策略的安全性要求所致[^2]。为了确保安全性并满足跨域需求，必须明确指定允许的来源。 #### 明确指定`Access-Control-Allow-Origin` 在生产环境中，建议将`Access-Control-Allow-Origin`设置为具体的源地址，而不是使用通配符`*`。例如： ```http Access-Control-Allow-Origin: https://your-site.com Access-Control-Allow-Credentials: true ``` 上述配置明确指定了允许的源，并启用了凭据支持，从而解决了通配符与凭据模式冲突的问题[^3]。 #### 前端代码示例：配置Axios以支持跨域请求 在前端应用中，可以使用`axios`库来处理跨域请求。以下是一个Vue项目中的配置示例： ```javascript const instance = axios.create({ withCredentials: true, // 启用凭据 baseURL: 'http://localhost:7894', }); instance.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json'; return config; }); ``` 通过设置`withCredentials: true`，前端会向服务器发送凭据信息（如Cookie），从而实现跨域认证[^4]。 #### 后端代码示例：Node.js中的CORS配置 后端需要正确配置以响应前端的CORS请求。以下是一个Node.js示例，展示如何正确设置CORS头： ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors({ origin: 'http://localhost:8080', // 明确指定允许的源 credentials: true, // 启用凭据支持 })); app.post('/Login', (req, res) => { res.set({ 'Access-Control-Allow-Origin': 'http://localhost:8080', // 明确指定允许的源 'Access-Control-Allow-Credentials': 'true', // 启用凭据支持 }); res.json({ message: 'Login successful' }); }); app.listen(7894, () => console.log('Server running on port 7894')); ``` 通过上述配置，后端明确指定了允许的源，并启用了凭据支持，从而解决了CORS策略阻止请求的问题[^5]。 #### 预检请求（Preflight Request）的处理 对于复杂的跨域请求（如自定义头或非简单方法），浏览器会先发送一个预检请求（OPTIONS方法）。后端需要正确响应预检请求，例如： ```javascript app.options('/Login', (req, res) => { res.set({ 'Access-Control-Allow-Origin': 'http://localhost:8080', 'Access-Control-Allow-Credentials': 'true', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Authorization', }); res.sendStatus(204); }); ``` 上述配置确保了预检请求能够成功通过，从而允许实际请求的执行[^6]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值