Access to XMLHttpRequest at has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.问题的解决
场景:
前端是调用http://XXXXX:1808下的接口,但是网关代理后映射端口为18021,这导致前端页面接口显示也是18021,请求后端接口时需要跨域。
解决:
跨域问题:是浏览器自带的保证同源的安全策略,即:该页面下的js请求只能是同协议,同IP,同端口(CROS标准),其中有一个不同,就是跨域问题。
后端:使用.net core,需要在Startup.cs的Configure函数中添加以下:
app.UseCors(builder => builder.AllowAnyMethod() //允许任何方法 //.AllowAnyOrigin() .SetIsOriginAllowed(_ => true) //允许任何源 .AllowAnyHeader() .AllowCredentials());
前端:用axios解决的,代码如下:
axios .post(url, fd, { headers: { "Access-Control-Allow-Origin": "http://XXXXX:1808", "Access-Control-Allow-Methods": "*", "Content-Type": "multipart/form-data", "Access-Control-Allow-Headers": "TOKEN,content-type", "TOKEN": cookies.getToken() } })
其中,Access-Control-Allow-Headers是需要传的自定义的header。这里有一个自定义的Header。
Access-Control-Allow-Methods可以填的详细一点,值包括:POST, GET, OPTIONS等,其中的OPTIONS是必需的。因为跨域是非简单请求,它会发两次请求。第一次是OPTIONS,就是预检,用来向后端询问是否允许跨域。第二次才是把参数带进去。
Access-Control-Allow-Origin是要跨去哪里,即目标源。
如果出现ERR_CONNECTION_REFUSED的问题,可能是Access-Control-Allow-Methods没加OPTIONS。
参考:
https://www.cnblogs.com/lishanlei/p/8823823.html
https://blog.csdn.net/longgeqiaojie304/article/details/85270839
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)