相关疑难解决方法(0)

尝试从REST API获取数据时,请求的资源上不存在"Access-Control-Allow-Origin"标头

我正在尝试从HP Alm的REST API中获取一些数据.它适用于小卷曲脚本 - 我得到了我的数据.

现在使用JavaScript,fetch和ES6(或多或少)似乎是一个更大的问题.我一直收到此错误消息:

无法加载Fetch API.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许来源" http://127.0.0.1:3000 "访问.响应具有HTTP状态代码501.如果不透明响应满足您的需要,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

我知道这是因为我试图从我的localhost中获取该数据,解决方案应该使用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));
}
Run Code Online (Sandbox Code Playgroud)

我正在使用Chrome.我也尝试使用Chrome CORS插件,但后来我收到另一条错误消息:

当请求的凭据模式为"include"时,响应中"Access-Control-Allow-Origin"标头的值不能是通配符"*".因此,不允许来源" http://127.0.0.1:3000 "访问.XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

javascript api cors preflight fetch-api

345
推荐指数
11
解决办法
82万
查看次数

如何解决 Netlify 中的 cors 问题

我在 Netlify 上使用了一个 React 应用程序 6 个月,没有出现任何问题。从 .com 更改为 .app 后,我的网站开始收到 CORS 错误消息:

从来源“ https://jovial-mccarthy-f17fcd.netlify.app ”访问“ https://newsapi.org/v2/everything?q=bitcoin&from=2020-5-27&sortBy=publishedAt&apiKey=xxx ”处的 XMLHttpRequest已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。

当我在本地服务器上运行时,它运行良好,并且没有错误消息,但是当在 Netlify 上部署时,我收到上面的错误消息。

我已将 netlify.toml 文件添加到我的根文件夹中:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"
Run Code Online (Sandbox Code Playgroud)

但我仍然收到错误消息,并且 api 新闻数据被阻止显示在我的网站上。

我使用 axios 进行数据调用。

import axios from 'axios';

const API_URL = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-5-27&sortBy=publishedAt&apiKey=1b823477c9864b7ebb4eb4e9d4148238";

//async function grabbing bitCoin data
export const getNews = async () …
Run Code Online (Sandbox Code Playgroud)

cors reactjs netlify

5
推荐指数
0
解决办法
6542
查看次数

标签 统计

cors ×2

api ×1

fetch-api ×1

javascript ×1

netlify ×1

preflight ×1

reactjs ×1