我试图从惠普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/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,而无需传递任何额外参数。

其他回答

尝试在下面的代码中添加所有这些头文件,在每条路由之前,在你的应用程序中定义,而不是在路由之后

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

对于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);

对于Node.js和Express.js后端,我使用这个:)

App.use(函数(req, res, next) { res.header(“Access-Control-Allow-Origin”、“YOUR-DOMAIN.TLD”);//更新到匹配你将发出请求的域 res.header("Access-Control-Allow-Headers", "Origin, x - request - with, Content-Type, Accept"); next (); });

更多详情:CORS在ExpressJS

在我的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,而无需传递任何额外参数。

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

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.