Access to XMLHttpRequest at “ xxx” from origin ‘null‘ has been blocked by CORS policy解决方法

最新推荐文章于 2025-06-09 22:35:10 发布
最新推荐文章于 2025-06-09 22:35:10 发布
阅读量3.3w 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Terry_R/article/details/96112151
本文介绍了一种解决前端访问PHP后端接口时出现的跨域问题的方法，通过修改Apache配置文件来设置Access-Control-Allow-Origin头部，允许所有域名跨域访问。

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

本人搭建好PHP后端框架并部署到服务器上后，前端访问后端接口发生了 Access to XMLHttpRequest at “ xxx” from origin 'null' has been blocked by CORS policy： Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.的错误，查找了网上若干方法，用下面这种方法解决问题：

 

修改服务器上的Apache配置文件/etc/httpd/conf/httpd.conf或/etc/apache2/apache.conf(不同linux服务器的apache配置文件位置)

在

<Directory "/var/www">
    AllowOverride All
    # Allow open access:
    Require all granted
   
</Directory>

中间加上Header set Access-Control-Allow-Origin *    #允许所有域名跨域访问

保存退出

 

 

 

建议将前后端源码部署到服务器上访问，保证安全性。

Access to XMLHttpRequest at ‘file:///D:/xx/xxx.json‘ from origin ‘null‘ has been blocked by CORS问题解决
oscar999的专栏
04-12 1万+
在浏览器打开本地的html文件， 上面proxy中的url获取的就是一个本地文件， 协议是file://，如果是在服务器启动的话，则使用的是http或者https协议。 出于安全性考虑， Chrome默认禁止了这种用法，file协议和http/https协议不同，会被Chrome认为是跨域访问，所以会报被CORS(Cross-Origin Resource Sharing，跨域资源共享)的安全策略阻止。
Access to XMLHttpRequest at ‘http:xxx‘ from origin ‘null‘ has been blocked by CORS policy: No ‘Acces
Saehun1994的博客
07-02 2116
具体来说，错误中提到的“Access to XMLHttpRequest at 'http:xxx' from origin 'null' has been blocked by CORS policy”意味着从“null”这个源（通常是因为你的代码是在本地文件系统中直接打开而不是通过服务器运行的）向“http:xxx”这个地址发送请求时被CORS策略阻止了。头部，你可以将其设置为你的前端服务器的URL（如果你希望只允许来自该URL的请求）或。（允许来自任何源的请求，但出于安全考虑，通常不推荐）。
前端跨域主流解决方案（Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy）
weixin_43239880的博客
04-06 3万+
前端跨域主流解决方案（Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy）
成功解决 origin ‘http://localhost‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
最新发布
m0_47020683的博客
06-09 507
看报错第二个ip地址，是什么就改成什么，如果没有端口号那就不要加端口号。我其中的.setAllowedOrigins(
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...
Dawnchen1的博客
05-27 1万+
跨源资源请求问题解决方案 问题描述：当我们在vsCode中使用 open in brower插件打开html文件文件时，就会报错 xxx已被CORS策略阻止，引入的资源还会失效。 解决办法1 :Live Server插件 在vsCode的插件市场中搜索并安装Live Server插件： 安装好后，右键要打开的文件，就会出现“Open with Live Serve”选项，这样打开文件就不会报错了： 解决办法2：anywhere 在vsCode控制台或者cmd中安装npm install anywhe
前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy
热门推荐
weixin_40756509的博客
03-25 32万+
前言： 在前端发出Ajax请求的时候，有时候会产生跨域问题，报错如下: Access to XMLHttpRequest at 'http://127.0.0.1/api/post' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 针对以上问题，本文提供两种解决方案，CORS中间件和JSO
import/export实验-from origin ‘null‘ has been blocked by CORS policy:
xie__jin__cheng的博客
10-11 5486
1.问题 Access to script at 'file:///D:/java/tomcat8-ac/webapps/web1/imt.js' 访问'file:///D:/java/tomcat8-ac/webapps/web1/imt.js' from origin 'null' has been blocked by CORS policy: 从原点“null”已被CORS策略阻止: Cross origin requests are only supported for protoc.
【跨域问题解决】Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS
aaaa_aaab的博客
08-26 1484
这个错误是由于浏览器的同源策略（CORS, Cross-Origin Resource Sharing）导致的。当从一个源（origin）向另一个源请求资源时，如果这两个源的协议、域名或端口号不同，就会触发CORS策略。解决方法要解决这个问题，你需要在你的后端服务中添加CORS支持，以便它允许来自你的请求。这通常涉及到在你的后端服务器中添加适当的响应头（Headers）。
Access to XMLHttpRequest at ‘fileDxxxxx.json‘ from origin ‘null‘ has been blocked by CORS问题解决
begefefsef的博客
08-01 5599
出于安全性考虑，Chrome默认禁止了这种用法，file协议和http/https协议不同，会被Chrome认为是跨域访问，所以会报被CORS(Cross-OriginResourceSharing，跨域资源共享)的安全策略阻止。在该文件源码中，使用了proxy获取数据，数据源使用的是文件名为mydata.json的文件。在浏览器打开本地的html文件，上面proxy中的url获取的就是一个本地文件，协议是file//，如果是在服务器启动的话，则使用的是http或者https协议。...
‘Access to XMLHttpRequest at ... from origin ... has ben blocked by CORS policy‘vue中的跨域问题解决办法
Aphea的博客
10-05 2107
用vue做的前端，当通过axios通信时，直接报错，且无返回码 目的url是http协议，通过测试发现，get其他https协议的url能够成功，初步判断是协议的问题，即跨域 解决办法： 在vue.config.js中修改为 module.exports = { devServer: { proxy: { '/api': { // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: Request header
eriz程序之路
01-24 13万+
Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. 当跨域请求接口时可能...
前端项目启动报错：from origin ‘null‘ has beenblocked by CORS policy: Cross origin requests are only supported
2201_75568521的博客
08-25 4911
把本地图片地址转成http//https 网址再用项目就可以启动不会报错啦。
Access to XMLHttpRequest at xxxx from origin ‘null‘ has been blocked by CORS policy:
LifeGoesOn
07-04 6119
使用前后端分离的方式创建web项目的时候出现问题： 这是因为 ajax 请求的对应的域在本地的一个文件路径，比如在D盘的某个文件夹，这里存放的都是前端文件； 但是对应的服务器是 localhost 的一个域名； 虽然请求可以到达服务端，服务端也可以处理，但是请求是无法进入ajax的success部分的。 springboot处理的方式是，在代码里面加上跨域的注解。 spring的官方文档有这个注解的解释，如下图 简单翻译一下： 这个注解会使得对应的方法支持跨域请求。 默认情况下，允许所有的 origi
Access to XMLHttpRequest at ‘ ‘ from origin ‘null‘ has been blocked by CORS policy问题解决
weixin_45510031的博客
04-18 3524
最大意的一种情况（本人就是这种，突然脑子断根弦），打开方式有问题。spring boot内嵌了tomcat，所以打开html文件的方式不能和servlet一样（servlet需要手动部署到tomcat目录下），不能直接去点击需要打开的html文件，而是。举个栗子：127.0.0.1:8080/login.html。但是试了好多都不行，在vscode下载了。语句是否正确，如果sql语句有问题也会出现该种情况。网上有很多关于此问题的解决方案，像。插件试了解决跨域问题仍然没有解决。
Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy:
eadela的博客
04-19 3000
Access to XMLHttpRequest at 'file:///F:/vue/vue20200414/%E5%BD%92%E6%A1%A3/%E5%BD%92%E6%A1%A3/04%20day_vue/axios2.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are on...
解决跨域问题（从浏览器读取本地文件）from origin ‘null‘ has been blocked by CORS policy
m0_62172798的博客
04-26 8829
在学习d3.js的过程中，通过d3.csv()读取本地csv文件的过程中出现了跨域错误，错误如下：Access to fetch at 'file:///D:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%EF%BC%88%E7%A1%95%EF%BC%89/htmlcssjsvue/code/d3.js/data222.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests a
ajax post上传数据时，前端出现的跨域权限问题：ccess to XMLHttpRequest at ‘’rom origin 'null' has been blocked by CORS ...
weixin_30369087的博客
08-27 419
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://www.cnblogs.com/autoXingJY/p/11419860.html 本人前端使用多个框架时，jq ajax传参出现如下报错： 最后发现，可能是xhr的相关默认参数被修改了。顾使用jq 传参时，一直报错，jq aj...
Access to XMLHttpRequest at file from origin ‘null‘ has been blocked by CORS policy谷歌浏览器本地打开项目js文件报错
了迹奇有没
02-14 5720
CORS 策略已阻止从源“null”访问“文件路径”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for pro
cgs的博客
10-12 1万+
问题： visual studio code 中使用 open in browser 插件，在浏览器中打开 html 文件后，如下图所示： 从Sources选项卡中可以看出来，并没有加载 javascript 文件，如下图所示： html 文件内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy:No 'Access-Control-Allow-Origin' header is present on the requested resource
03-28
<think>好的，我现在需要帮用户解决一个CORS的问题。用户遇到了错误信息：“Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource”。首先，我要回忆一下CORS的基本概念和常见原因。 CORS是跨源资源共享，浏览器出于安全考虑会阻止跨域请求，除非服务器明确允许。这个错误通常是因为服务器没有正确设置响应头，比如缺少Access-Control-Allow-Origin。那用户可能是在前端应用尝试访问不同源的API时遇到了这个问题。 接下来，我需要考虑可能的解决方案。首先，用户可能没有权限修改服务器配置，比如在使用第三方API的情况下，这时候可能需要后端代理或者JSONP。但如果是自己的服务器，应该建议他们在后端设置CORS头。 常见的解决方法包括： 1. 服务器端设置响应头，比如Access-Control-Allow-Origin为*或特定域名，还有相关的其他头如Allow-Methods、Allow-Headers等。 2. 如果是开发环境，可以用开发服务器的代理功能，比如Vue的vue.config.js或React的setupProxy.js，或者用webpack-dev-server的proxy配置。 3. 测试时禁用浏览器安全策略，不过这只是临时方案，不推荐生产使用。 4. 如果用户使用Node.js作为后端，可能需要检查中间件如cors的配置是否正确启用，有没有设置正确的来源和方法。 5. 如果是Nginx或Apache，需要检查配置文件是否正确添加了CORS相关的头信息。 另外，需要注意预检请求（Preflight），对于复杂请求，浏览器会先发OPTIONS请求，服务器必须正确处理OPTIONS方法并返回正确的头。如果服务器没有处理OPTIONS，也会导致CORS失败。 还需要提醒用户，使用*作为允许的源在生产环境可能不安全，最好指定具体的域名。同时，携带凭证（如cookies）的请求不能使用*，这时候需要明确设置具体的源，并且设置Allow-Credentials为true。 用户可能不太清楚如何具体配置服务器，所以需要分步骤给出不同后端环境的例子，比如Node.js + Express、Nginx、Apache等。如果用户是前端开发者，可能需要指导他们如何配置代理，或者联系后端团队处理。 此外，可能还需要检查服务器是否有其他安全策略阻止了请求，比如防火墙设置或者云服务的安全组规则。有时候，即使CORS头正确，网络层的限制也会导致请求失败。 最后，要建议用户检查浏览器控制台的详细错误信息，确认请求是否确实被服务器拒绝，或者是否存在其他问题，比如网络错误或证书问题。同时，使用工具如Postman或curl测试API，确认服务端是否正常运行，排除前端代码的问题。</think>这个错误是浏览器**跨域资源共享（CORS）机制**触发的安全限制。以下是分步骤解析与解决方案： --- ### 一、问题本质 1. **跨域请求**：你的前端页面域名（如`http://localhost:3000`）请求了不同域名/端口/协议的后端API（如`http://api.example.com`） 2. **浏览器拦截**：由于服务器未返回`Access-Control-Allow-Origin`响应头，浏览器判定请求不安全并阻止 --- ### 二、解决方案分类 #### 方案1：修改服务端配置（推荐） ```javascript // Node.js/Express 示例 const cors = require('cors'); app.use(cors({ origin: 'http://your-frontend-domain.com', // 或 '*' 允许所有域 methods: ['GET', 'POST', 'PUT', 'DELETE'], allowedHeaders: ['Content-Type', 'Authorization'] })); ``` ```nginx # Nginx 配置示例 location / { add_header 'Access-Control-Allow-Origin' 'http://your-frontend-domain.com'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,Content-Type,Authorization'; } ``` #### 方案2：开发环境临时方案 - **前端代理**（适用于Vue/React等脚手架）： ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://your-backend-domain.com', changeOrigin: true } } } } ``` - **禁用浏览器安全策略**（仅测试用）： ```bash # Chrome启动参数（macOS/linux） open -n -a "Google Chrome" --args --disable-web-security --user-data-dir=/tmp/chrome ``` #### 方案3：处理预检请求（OPTIONS） ```javascript // 显式处理OPTIONS请求 app.options('/api', cors()); // Express中间件简化处理 ``` --- ### 三、关键注意事项 1. **生产环境必须指定具体域名**，避免使用`*` 2. **携带凭证时**（如cookies）需配置： ```javascript Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://your-frontend-domain.com // 不能为* ``` 3. **复杂请求**（如自定义Header）会触发预检请求，需配置`Access-Control-Allow-Headers` --- ### 四、排查工具 1. 浏览器开发者工具 -> Network标签查看请求头/响应头 2. 使用`curl -I http://api-url`检查响应头 3. 通过Postman发送请求验证是否为纯前端问题 如果服务端无法修改，最后可考虑**JSONP**（仅限GET请求）或**服务器中转代理**方案。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值