如何打开IBM代码引擎应用程序的COR
我创建了一个正在暴露几个API的代码引擎应用程序。它的容器是使用云本机构建包构建的，因此我可以解决安全问题的修复程序。
我可以从浏览器和卷发中成功调用API，但是当我尝试从React.js应用中调用API时，我会收到以下错误 -
Access to fetch at '...' from origin 'http://localhost:3000'
has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
我需要在我的代码引擎应用程序上启用CORS，但是正在努力努力确定如何。
通过运行npx create-react-app创建了react.js应用程序骨架。我正在测试react.js应用本地运行npm start。当准备就绪时，将通过运行npm run build来构建。
对代码引擎应用程序API的其余呼叫一次<代码>使用，其中endpoint and method是对组件的输入：
useEffect(() => {
if (!endpoint || !method) return;
console.log('Starting');
const appurl = `https://${endpoint}${method}`;
fetch(appurl, {
method: 'GET',
headers: {
"Content-Type": "application/json"
}
})
//.then(response => response.json())
.then(response => console.log(response))
.catch(console.error);
console.log('url is ', appurl);
},[]);
I have created a Code Engine application which is exposing a couple of APIs. Its container is built using a Cloud Native Buildpack, so I can pick up fixes to security issues.
I can successfully invoke the APIs from a browser and from curl, but when I attempt to invoke the APIs from a React.js app, I get the following error -
Access to fetch at '...' from origin 'http://localhost:3000'
has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
I need to enable cors on my code-engine application, but am struggling to determine how.
The react.js app skeleton was created by running npx create-react-app. I am testing the react.js app locally running npm start. When it is ready it will be built by running npm run build.
The REST call to the Code Engine Application API is in a fire one time useEffect, where endpoint and method are inputs to the component:
useEffect(() => {
if (!endpoint || !method) return;
console.log('Starting');
const appurl = `https://${endpoint}${method}`;
fetch(appurl, {
method: 'GET',
headers: {
"Content-Type": "application/json"
}
})
//.then(response => response.json())
.then(response => console.log(response))
.catch(console.error);
console.log('url is ', appurl);
},[]);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对于后CORS请求，您的应用程序必须服务于跨越前请求的选项。也许是问题？请参阅 https：//developer.mozilla.orgla.orgg/en-us/docs/docs/docs/docs/en-us/docs /Web/HTTP/CORS 或CORS上的其他资源。特别是对于发布请求，您需要提供访问控制范围的选项。
因为带有API的代码引擎应用程序由Node.js/ Express供电，而所有需要完成的是添加
CORS 作为依赖项，然后添加参见 https://expressjs.com/en/resources/middleware/cors.html
For POST CORS requests, your app has to serve the OPTIONS preflight request. Maybe that’s the issue? See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS or other resources on CORS. For POST requests in particular, you need to provide Access-Control-Allow-Headers options.
Because the Code Engine app with the API is powered by Node.js / Express, and all that needs to be done is to add
corsas a dependency, then addSee https://expressjs.com/en/resources/middleware/cors.html