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

当前回答

添加模式:no-cors可以避免API中的CORS问题。

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));
}

2020-11-27 10:42:39

其他回答

出现问题是因为你在前端添加了以下代码作为请求头:

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

这些头属于响应，而不是请求。所以去掉它们，包括这一行:

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

你的请求有“Content-Type: application/json”，因此触发了所谓的CORS preflight。这导致浏览器使用OPTIONS方法发送请求。详细信息请参见CORS飞行前准备。

因此，在你的后端，你必须通过返回响应头来处理这个预飞行的请求，其中包括:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

当然，实际的语法取决于后端使用的编程语言。

在你的前端，它应该像这样:

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

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

2019-01-24 08:30:12

当客户端URL和服务器URL(包括端口号)不匹配时，会发生此错误。在这种情况下，您需要启用跨源资源共享的CORS服务。

如果您正在托管Spring REST服务，那么您可以在Spring框架中的CORS支持的博客文章中找到它。

如果你使用Node.js服务器托管服务，那么

停止Node.js服务器。 NPM安装cors—保存将以下行添加到server.js中

const cors=require("cors");
const corsOptions ={
   origin:'*', 
   credentials:true,            //access-control-allow-credentials:true
   optionSuccessStatus:200,
}

app.use(cors(corsOptions)) // Use this after the variable declaration

2017-10-28 09:17:29

当客户端从他的主机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

添加模式:no-cors可以避免API中的CORS问题。

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));
}

2020-11-27 10:42:39

对于Node.js，如果你正在使用路由器，请确保在路由器之前添加CORS。否则，仍然会得到CORS错误。像下图:

const cors = require('cors');

const userRouter = require('./routers/user');

expressApp = express();
expressApp.use(cors());
expressApp.use(express.json());
expressApp.use(userRouter);

2020-11-01 19:39:54

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

推荐文章

最新文章

标签