【问题标题】:jQuery AJAX cross domain issuesjQuery AJAX 跨域问题
【发布时间】:2023-11-05 02:43:01
【问题描述】:

我在尝试从本地计算机(带有 main.js 文件的常规 index.html)和我自己的个人网站进行 ajax 调用时遇到严重问题。 ajax URL 有一个不同的域,看起来像:

$.ajax({
    type: 'GET',
    crossDomain: true,
    url: 'http://www.someURL.com/api/v1/comments/XXXXX',
    success: function(data){
        console.log(data);
    }
});

我尝试将类型更改为 JSONP,但随后收到错误“Uncaught SyntaxError: Unexpected token :”。 ajax调用成功,没有阻塞,但是数据是json。我尝试使用 CORS 并询问了很多我的开发者朋友。我似乎无法得到答案,是数据库限制我的问题还是我有什么解决方案?

编辑:

我什至尝试设置一个 .htaccess 文件:

# Always set these headers. 
Header add Access-Control-Allow-Origin "*" 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 
Header always set Access-Control-Max-Age "1000" 
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

收到错误:

跨源请求被阻止:同源策略不允许读取 someURL.com/api/v1/cmets/XXXXXXXXXX 上的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。

【问题讨论】:

  • 我什至尝试设置一个 .htaccess 文件: # 始终设置这些标题。标题添加 Access-Control-Allow-Origin "*" 标题添加 Access-Control-Allow-Headers "origin, x-requested-with, content-type" 标题添加 Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 标头始终设置 Access-Control-Max-Age "1000" 标头始终设置 Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
  • 不涉及数据库。找出 api 是否提供 jsonp 兼容性,因为如果没有,没有 jsonp 选项可以解决问题。让 CORS 工作确实是一件令人头疼的事情,所以如果可能,请尝试通过 jsonp 修复它。
  • 这段代码有什么错误?
  • @Jamie 我将您的两个 cmets 的内容编辑为您的问题。通常最好将错误消息等大细节以及您通过.htaccess 文件尝试的内容编辑到您的问题中,因为它允许进行其他格式设置并有助于创建包含支持信息的完整问题。
  • @War10ck 同意 - 我不知道如何编辑我的大文本。谢谢你这样做!我刚刚想通了。

标签: javascript jquery ajax json


【解决方案1】:

默认情况下,您在局域网内发出的请求将被浏览器阻止。要取消阻止跨源请求,您需要启用 CORS。您可以使用浏览器插件来完成这项工作。

这是我最喜欢的 chrome:https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

添加此扩展后,打开您发送 AJAX 调用的 URL,并使用上述插件启用 CORS 请求。

【讨论】: