跨域请求详解：解决“Origin null is not allowed by Access-Control-Allow-Origin”错误

跨域请求：解决“Origin null is not allowed by Access-Control-Allow-Origin”错误

问题概述

在使用JavaScript进行AJAX请求时，你可能会遇到“Origin null is not allowed by Access-Control-Allow-Origin”错误。当浏览器从文件系统URL发送请求时，它会将来源（origin）设置为“null”。然而，许多网站限制了哪些来源可以访问它们的资源，从而导致此错误发生。

解决方法

为了解决这个问题，我们需要修改请求方式，以避免将来源设置为“null”。

使用JSONP

将你的请求更改为使用JSONP（JSON with Padding）格式。JSONP允许你使用 <script> 标签来请求数据，这会绕过同源策略限制。

修改后的代码如下：

$.ajax({
  url: 'http://www.panoramio.com/wapi/data/get_photos',
  data: {
    v: 1,
    key: 'dummykey',
    tag: 'test',
    offset: 0,
    length: 20,
    minx: -30,
    miny: 0,
    maxx: 0,
    maxy: 150,
    callback: 'processImages'
  },
  dataType: 'jsonp'
});

其他注意事项

• 确保服务器允许JSONP请求。在服务器端设置CORS（跨域资源共享）标头，以允许来自你的网站的请求。
• 在服务器响应中，使用适当的回调函数名来处理数据。在此示例中，回调函数名为“processImages”。
• 如果服务器不支持JSONP，则无法解决此问题。

结论

通过使用JSONP并修改请求方式，你可以解决“Origin null is not allowed by Access-Control-Allow-Origin”错误，并从文件系统URL向外部服务器发送AJAX请求。

常见问题解答

1. 为什么浏览器会将来源设置为“null”？

当浏览器从文件系统URL发送请求时，它会将来源设置为“null”，因为文件系统URL被认为是不安全的来源。

2. 如何设置CORS标头？

在服务器端，你可以使用Access-Control-Allow-Origin标头来允许来自特定来源的请求。例如：

Access-Control-Allow-Origin: https://www.example.com

3. JSONP是否安全？

与其他跨域请求方法相比，JSONP是一种相对安全的跨域请求方法。但是，它仍然存在一些潜在的安全性问题，例如：

• JSON劫持： 攻击者可以在服务器响应中修改回调函数的代码，从而执行恶意代码。
• 请求伪造： 攻击者可以创建假的JSONP请求，诱使受害者发送敏感数据到恶意服务器。

4. 除了JSONP，还有哪些其他跨域请求方法？

除了JSONP之外，还有其他跨域请求方法，包括：

• CORS： 这是当今使用最广泛的跨域请求方法。它使用服务器端标头来控制对资源的访问。
• postMessage： 这种方法使用postMessage()函数在不同的窗口或iframe之间发送消息。

5. 我该如何选择最佳的跨域请求方法？

最佳的跨域请求方法取决于你的具体情况。一般来说，CORS是首选的方法，因为它更安全、更灵活。但是，如果服务器不支持CORS，或者你需要从不支持CORS的网站请求数据，则可以使用JSONP。