jquey XMLHttpRequest cannot load url.Origin null is not allowed by Access-Control-Allow-Origin

本文探讨了在使用jQuery进行XMLHttpRequest跨域请求时遇到的问题,并提供了三种解决方案来解决origin null is not allowed by Access-Control-Allow-Origin错误。

原文地址:http://stackoverflow.com/questions/3828982/xmlhttprequest-cannot-load-an-url-with-jquery

开始的时候使用

$.get(url地址,"json",success:cadte(data){});

url地址返回json数据

在ie浏览器上看不到任何内容,后来使用谷歌浏览器,发现显示“jquey XMLHttpRequest cannot load url.Origin null is not allowed by Access-Control-Allow-Origin”错误

gg后发现了解决方法:

Solution 1: $.ajax() + jsonp:

$.ajax({
  dataType: "jsonp",
  url: myurl ,
  }).done(function ( data ) {
  // do my stuff
});

Solution 2: $.ajax()+json+&calback=?:

$.ajax({
  dataType: "json",
  url: myurl + '&callback=?',
  }).done(function ( data ) {
  // do my stuff
});

Solution 3: $.getJSON()+calback=?:

$.getJSON( myurl + '&callback=?', function(data) {
  // do my stuff
});

最后使用第一中方法解决问题,2,3中方法没有测试


<think>我们遇到了一个CORS错误,具体是PROPFIND方法未被允许。错误信息指出在预检请求(preflight)的响应中,Access-Control-Allow-Methods头部没有包含PROPFIND方法。 我们需要在服务器端的CORS配置中允许PROPFIND方法。 回顾之前的Lighttpd配置,我们在CORS配置中允许的方法为: "Access-Control-Allow-Methods" => "GET, POST, OPTIONS, MKCOL" 现在要允许PROPFIND,我们需要将其添加到允许的方法列表中。 修改Lighttpd配置(通常在lighttpd.conf中): 找到设置Access-Control-Allow-Methods的地方,添加PROPFIND方法。 修改后的配置片段可能如下: ```nginx $HTTP["origin"] =~ ".*" { setenv.add-response-header = ( "Access-Control-Allow-Origin" => "*", "Access-Control-Allow-Methods" => "GET, POST, OPTIONS, MKCOL, PROPFIND", # 添加PROPFIND # ... 其他头部保持不变 ) } ``` 同时,确保预检请求(OPTIONS方法)的处理也正确配置,因为预检请求会检查允许的方法。 另外,注意如果请求中带有自定义头部(如Depth),还需要在Access-Control-Allow-Headers中声明。 修改后重启lighttpd服务使配置生效。 如果问题仍然存在,请检查: 1. 是否重启了lighttpd服务? 2. 是否在正确的位置修改了配置(比如是否在特定的路径下需要单独配置)? 3. 使用curl测试预检请求,查看响应头中是否包含了PROPFIND方法。 测试命令示例: ```bash curl -I -X OPTIONS http://192.168.0.1:8085/ \ -H "Origin: http://192.168.0.1" \ -H "Access-Control-Request-Method: PROPFIND" \ -H "Access-Control-Request-Headers: Depth" ``` 预期响应头中应有: Access-Control-Allow-Methods: GET, POST, OPTIONS, MKCOL, PROPFIND Access-Control-Allow-Headers: Depth (如果之前已经配置了Depth,则不需要修改) 如果之前没有配置Depth头部,则需要在Access-Control-Allow-Headers中添加Depth: ```nginx "Access-Control-Allow-Headers" => "Depth, Content-Type", ``` 因此,完整的配置修改如下: 在lighttpd.conf的CORS配置部分: ```nginx $HTTP["origin"] =~ ".*" { setenv.add-response-header = ( "Access-Control-Allow-Origin" => "*", "Access-Control-Allow-Methods" => "GET, POST, OPTIONS, MKCOL, PROPFIND", "Access-Control-Allow-Headers" => "Depth, Content-Type", "Access-Control-Expose-Headers" => "Access-Control-Allow-Origin, Access-Control-Allow-Methods", "Access-Control-Max-Age" => "86400" ) } ``` 另外,确保OPTIONS请求的处理配置正确(之前已有): ```nginx $HTTP["request-method"] == "OPTIONS" { setenv.add-response-header = ( "Content-Length" => "0" ) url.redirect = ( "^.*$" => "/204" ) url.redirect-code = 204 } ``` 重启lighttpd服务: ```bash sudo service lighttpd restart ``` 如果使用systemctl: ```bash sudo systemctl restart lighttpd ``` 这样配置后,PROPFIND方法应该被允许,预检请求会通过。 注意:在生产环境中,建议将`Access-Control-Allow-Origin`设置为具体的域名而不是`*`,尤其是当请求带有凭证(如cookies)时。 最后,根据用户的问题和我们的回答,我们需要生成3-5个相关问题。 </think>### 解决 "Method PROPFIND not allowed" CORS 错误 这个错误表明您的服务器未正确配置允许 PROPFIND 方法跨域访问。以下是完整的解决方案: #### 1. 修改 Lighttpd CORS 配置 在 `lighttpd.conf` 中添加 PROPFIND 方法许可: ```nginx $HTTP["origin"] =~ ".*" { setenv.add-response-header = ( "Access-Control-Allow-Origin" => "*", # 添加 PROPFIND 到允许的方法列表 "Access-Control-Allow-Methods" => "GET, POST, OPTIONS, MKCOL, PROPFIND", # 添加 Depth 头许可(PROPFIND 必需) "Access-Control-Allow-Headers" => "Depth, Content-Type", # 暴露必要头部给前端 "Access-Control-Expose-Headers" => "DAV, Allow, Content-Length", "Access-Control-Max-Age" => "86400" ) } ``` #### 2. 特殊处理 PROPFIND 请求 ```nginx # 处理 WebDAV 请求 $HTTP["request-method"] =~ "^(PROPFIND|PROPPATCH|MKCOL)$" { # 确保返回正确的 WebDAV 头部 setenv.add-response-header = ( "DAV" => "1, 2" ) } ``` #### 3. 验证配置的步骤 A. 重启服务器: ```bash sudo systemctl restart lighttpd ``` B. 使用 CURL 测试 PROPFIND 预检: ```bash curl -I -X OPTIONS http://192.168.0.1:8085/ \ -H "Origin: http://192.168.0.1" \ -H "Access-Control-Request-Method: PROPFIND" \ -H "Access-Control-Request-Headers: Depth" ``` C. 检查响应头是否包含: ``` Access-Control-Allow-Methods: GET, POST, OPTIONS, MKCOL, PROPFIND Access-Control-Allow-Headers: Depth ``` #### 4. 前端代码调整 ```javascript // 正确发送 PROPFIND 请求 function sendPropfindRequest() { fetch('http://192.168.0.1:8085/', { method: 'PROPFIND', headers: { 'Depth': '1', // PROPFIND 必需头 'Content-Type': 'application/xml' // 通常用于 WebDAV }, body: '<d:propfind xmlns:d="DAV:"><d:prop><d:resourcetype/></d:prop></d:propfind>' }) .then(response => { // 检查暴露的 DAV 头 const davHeader = response.headers.get('DAV'); if (davHeader && davHeader.includes('1')) { console.log('WebDAV server detected'); } }); } ``` #### 5. 常见问题排查 - **浏览器缓存问题**:强制刷新 (Ctrl+F5) 清除预检缓存 - **端口不一致**:确保前端页面端口 (如80) 和后端端口 (8085) 在同一个源策略下 - **WebDAV模块启用**:确认已启用 Lighttpd 的 WebDAV 模块 ```nginx server.modules += ("mod_webdav") ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值