当试图从REST API获取数据时，请求的资源上没有'Access-Control-Allow-Origin'标头

我试图从惠普Alm的REST API中获取一些数据。它使用一个小的curl脚本工作得很好——我得到了我的数据。

现在用JavaScript、fetch和ES6(或多或少)来实现这一点似乎是一个更大的问题。我一直收到这个错误信息:

无法加载获取API。对飞行前请求的响应则不然 pass访问控制检查:没有' access - control - allow - origin '头显示在所请求的资源上。“http://127.0.0.1:3000”是因此不允许访问。响应的HTTP状态代码为501。如果不透明响应满足您的需求，请将请求的模式设置为 'no-cors'获取禁用CORS的资源。

我明白这是因为我试图从我的本地主机内获取数据，解决方案应该使用跨起源资源共享(CORS)。我认为我确实这样做了，但不知为何，它要么忽略了我在头文件中写的内容，要么是其他问题。

那么，是否存在执行问题?我做错了吗?很遗憾，我无法查看服务器日志。我真的有点卡在这里了。

function performSignIn() {

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, {
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

我正在使用Chrome浏览器。我也尝试使用Chrome CORS插件，但随后我得到另一个错误消息:

响应中的'Access-Control-Allow-Origin'报头的值当请求的凭据模式为时，一定不能是通配符'*' “包括”。因此，来源“http://127.0.0.1:3000”是不允许的访问。对象发起的请求的凭据模式 XMLHttpRequest由withCredentials属性控制。

当前回答

使用dataType: 'jsonp'适合我。

   async function get_ajax_data(){
       var _reprojected_lat_lng = await $.ajax({
                                type: 'GET',
                                dataType: 'jsonp',
                                data: {},
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(jqXHR)
                                },
                                success: function (data) {
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                }
                            });


 } // function

2018-09-28 19:14:35

其他回答

我犯过很多次这样的错误，正因为如此，我给大家列了一张“清单”。

Enable CORS on your project: If you're using Node.js (by example) you can use: npm install cors; import cors from 'cors'; app.use(cors()); You can manually set the headers like this (if you want it): app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authortization'); res.setHeader('Acces-Control-Allow-Methods', 'GET, POST, PATCH, DELETE'); Remember to add http:// to your API link in your frontend project, some browsers like Chrome do not accept a request using CORS if the request URL isn't HTTP or HTTPS: http://localhost:3000/api Check if your project is using a proxy.config.js file. See Fixing CORS errors with Angular CLI proxy.

2021-12-05 00:23:28

CORS问题的可能原因

检查服务器端访问标头:参考此链接在浏览器中检查从服务器接收到的请求头。下图显示了标题如果您正在使用fetch方法并试图访问跨源请求，请确保mode:cors存在。请参阅此连结有时如果程序中有问题，你也会得到CORS问题，所以确保你的代码正常工作。确保在API中处理OPTION方法。

2021-05-27 10:27:14

在。net Core 6.0中使用WebAPI构建

以上这些方法对我都没用……这就成功了

// global cors policy
   app.UseCors(x => x
        .AllowAnyMethod()
        .AllowAnyHeader()
        .SetIsOriginAllowed(origin => true) // allow any origin 
        .AllowCredentials());

来源:https://stackoverflow.com/a/70660054/8767516

2022-11-14 20:40:45

在我的例子中，我使用下面的解决方案。

前端还是角

post(
    this.serverUrl, dataObjToPost,
    {
      headers: new HttpHeaders({
           'Content-Type':  'application/json',
         })
    }
)

后端(我使用PHP)

header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);

2019-09-25 21:46:49

使用下面的npm模块。这实际上挽救了生命。

https://www.npmjs.com/package/local-cors-proxy

您将得到一个CORS错误，例如下面的URL

https://www.google.co.in/search/list

在成功安装(local-cors-proxy)后，global npm install -g local-cors-proxy并设置代理URL。例如，下面的CORS问题进入localhost。因此，需要为CORS问题域添加域名(https://www.google.co.in)和端口(——port 8010)。欲了解更多，请查看链接 https://www.npmjs.com/package/local-cors-proxy

lcp --proxyUrl https://www.google.co.in --port 8010

设置成功后，它将生成如下所示的本地代理URL。

http://localhost:8010/proxy

在项目API URL中使用该域名。

API完整URL:

http://localhost:8010/proxy/search/list

在您的本地项目中获得CORS问题响应。

2021-03-03 05:46:32

当试图从REST API获取数据时，请求的资源上没有'Access-Control-Allow-Origin'标头

推荐文章

最新文章

标签