当试图从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属性控制。

当前回答

如果您在部署React应用程序netlify时遇到此错误，请使用以下步骤。

步骤1:创建netlify。Toml文件在你的react应用程序的根文件夹。

步骤2:复制粘贴以下代码:

`[[redirects]]
    from = "/cors-proxy/*"
    to = ":splat"
    status = 200
    force = true`

步骤3:以这种方式更新fetch/axios API:

我花了一段时间才想明白。

2021-02-28 22:55:35

其他回答

在我的react/express应用程序中遇到了这个问题。在server.js(或你的服务器文件名)中添加以下代码为我解决了这个问题。安装cors然后

const cors = require('cors');
app.use(cors({
    origin: 'http://example.com', // use your actual domain name (or localhost), using * is not recommended
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Origin', 'X-Requested-With', 'Accept', 'x-client-key', 'x-client-token', 'x-client-secret', 'Authorization'],
    credentials: true
}))

现在，您可以从前端直接调用API，而无需传递任何额外参数。

2022-11-17 14:44:44

删除:

credentials: 'include',

2018-07-18 07:30:58

使用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

在我的例子中，我必须在所有现有中间件下面添加一个自定义头中间件。我认为一些中间件可能会与Access-Control-Allow-Origin头相冲突，并尝试根据他们的需要来设置它。

所以代码应该是这样的:

app.use(cors());

....all other middleware here

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
...your routes

2022-07-11 06:29:32

当客户端从他的主机username.companyname.com调用我们的后端服务时，他常常得到上述错误

有两件事是必须的:

在发送回响应时，发送键为Access-Control-Allow-Origin且值为*的报头: context.Writer.Header()["Access-Control-Allow-Origin"] = []string{"*"} //避免CORS错误使用Go CORS库将AllowCredentials设置为false, AllowAllOrigins设置为true。

2021-09-22 09:18:21

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

推荐文章

最新文章

标签