用vue的axios链接php时跨域问题Access to XMLHttpRequest at ‘http://127.0.0.12/index.php‘ from origin

 

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
    exit;
}                      //这些是解决跨域问题的

从提供的引用来看,常见的 XMLHttpRequest 相关问题多为问题。 ### 可能出现的问题 1. **CORS 策略阻止访问**:若请求的资源没有设置 `Access-Control-Allow-Origin` 头,浏览器会因 CORS 策略阻止访问。就像引用[1]中提到的 “Access to XMLHttpRequest at 'http://******' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource”,这表明请求的资源未设置允许的头部信息,导致请求被阻止。 2. **响应头 `Access-Control-Allow-Origin` 值冲突**:若响应头 `Access-Control-Allow-Origin` 包含多个值,也会引发问题。如引用[2]中 “The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://www.ego.com, *’, but only one is allowed”,一个响应头只能有一个允许的值,否则会出现问题。 ### 解决办法 1. **后端配置允许**:可以在后端代码里设置允许的头部信息。以 Node.js 为例,可使用如下代码: ```javascript // 设置访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", '3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); next(); }); ``` 此代码来自引用[3],通过设置 `Access-Control-Allow-Origin` 为 `*`,允许所有来源的请求访问。 2. **在特定接口设置允许**:在 Vue 的 Node 连接、查询数据库,若遇到问题,可在查询成功的条件下添加允许的头部信息。示例代码如下: ```javascript res.setHeader("Access-Control-Allow-Origin", '*'); ``` 该代码来自引用[4],通过设置响应头,允许所有来源的请求访问该接口。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值