[英]Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy
I have a problem with this error:我有这个错误的问题:
Access to XMLHttpRequest at 'https://...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. POST https://... net::ERR_FAILED
I am trying to send data but getting a "CORS" error我正在尝试发送数据但收到“CORS”错误
Am I missing something?我错过了什么吗? Here is my code
这是我的代码
var dataBlob = File; const submit = async () => { //Convert Blob URL to file object with axios const config = { responseType: "blob" }; await axios.get(mediaBlobUrl, config).then((response) => { dataBlob = new File([response.data], "record", { type: "media" }); }); let formdata = new FormData(); formdata.append("sequence", "L"); formdata.append("video", dataBlob); console.log("data", dataBlob); //POST try { console.log(formdata.getAll); let result = await axios({ url: "https://abc...", method: "POST", data: formdata, }); console.log(result.data); } catch (err) { console.log(err); }
It's nothing unusual at all if you try to access 3rd party api providers from your development environment.如果您尝试从您的开发环境访问 3rd 方 api 提供程序,这完全没有什么不寻常的。
You can test a source a prior via:您可以通过以下方式测试源:
curl -i -X OPTIONS source/of/your/desire/ping \\ -H 'Access-Control-Request-Method: GET' \\ -H 'Access-Control-Request-Headers: Content-Type, Accept' \\ -H 'Origin: <http://localhost:3000>'
If you'll get back the CORS message, you will need to provide a proxy for your local env.如果您要返回 CORS 消息,则需要为本地环境提供代理。
There is a quite easy way nowadays for apps that are based on CRA and if you only need to setup one proxy in development.对于基于 CRA 的应用程序,如果您只需要在开发中设置一个代理,现在有一种非常简单的方法。 You just need to provide the needed proxy in your
package.json
:您只需要在
package.json
提供所需的代理:
"proxy": "https://theThirdPartyResource",
See documentation: https://create-react-app.dev/docs/proxying-api-requests-in-development/查看文档: https : //create-react-app.dev/docs/proxying-api-requests-in-development/
To avoid CORS issues in your dev environment you can use a proxy provided by eg http-proxy-middleware
( https://www.npmjs.com/package/http-proxy-middleware )为了避免开发环境中的CORS 问题,您可以使用由
http-proxy-middleware
( https://www.npmjs.com/package/http-proxy-middleware ) 提供http-proxy-middleware
With it installed you can create a file named setupProxy.js in your /src
directory like:安装后,您可以在
/src
目录中创建一个名为 setupProxy.js 的文件,例如:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
app.use(
'/proxy',
createProxyMiddleware({
target: 'https://originalApi.com/api/v1',
changeOrigin: true,
pathRewrite: {
'/proxy': '/',
},
})
);
};
In your axios request, you will be able to use:在您的 axios 请求中,您将能够使用:
axios.get('/proxy/suburl', config)
.then((response) => {
// what ever you want to do with your response
}).catch(error => console.log(error))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.