极简修复CORS跨域问题,亲测有效

原文地址:https://www.jeremyjone.com/456/ ,转载请注明。

在前后端分离开发、远程调用等过程中,总能碰到跨域问题,其报错大体长这个鸟样:

file

对于这个bug,前端同学可以使用简单的方法处理,这里推荐两个方案:

方案一,安装一个名为Allow-Control-Allow-Origin的插件

你没有听错,前端同学最方便的方式其实是安装一个插件,安装后,在浏览器中打开它,使图标变为绿色便可以正常使用。

Chrome爱心地址需要梯子,自行解决。

这个很好用,但是插件只适用于开发阶段,因为产品一旦发布,不能要求用户同样安装类似插件。

方案二,构建代理服务器

在构建之前,需要了解CORS,该错误源于浏览器称为同源策略的安全机制。

那么什么是CORS?

参考文档,这是mozilla的官方描述,有兴趣的同学可以自行查看,大体是这样的:

跨源资源共享(CORS)是一种机制,它使用额外的HTTP标头告诉浏览器让在一个源(域)上运行的Web应用程序有权从不同来源的服务器访问所选资源。Web应用程序在请求具有与其自己的源不同的源(域,协议或端口)的资源时执行跨源HTTP请求。

file

针对ASP.NET的处理方案,参考这里,自行查看。

使用代理

这里推荐一个网址:https://cors-anywhere.herokuapp.com/ ,这是一个专门的跨域请求网址,直接打开该网址,可以看到描述如下:

<
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个错误是由于浏览器的同源策略导致的。同源策略是浏览器的一种安全策略,它限制了一个源加载的文档或脚本如何与来自另一个源的资源进行交互。如果两个页面的协议、端口和主机名都相同,则它们属于同一个源。如果它们中的任何一个不同,则它们属于不同的源。当浏览器从一个源请求资源时,如果响应头中没有包含 Access-Control-Allow-Origin 字段,或者该字段的值不包含当前页面的源,那么浏览器就会拒绝该响应,从而导致跨域错误。 解决这个问题的方法有很多种,其中一种是在服务器端设置响应头,允许指定的源访问资源。具体来说,服务器需要在响应头中添加 Access-Control-Allow-Origin 字段,并将其设置为当前页面的源。例如,如果当前页面的源为 https://www.example.com,那么服务器应该设置响应头如下: ```python Access-Control-Allow-Origin: https://www.example.com ``` 如果服务器允许多个源访问资源,那么可以将多个源用逗号分隔,例如: ```python Access-Control-Allow-Origin: https://www.example.com, https://www.another.com ``` 如果服务器允许所有源访问资源,那么可以将 Access-Control-Allow-Origin 字段设置为 *,例如: ```python Access-Control-Allow-Origin: * ``` 如果你没有权限修改服务器的响应头,那么可以考虑使用代理服务器或者 JSONP 等技术来解决跨域问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值