response设置响应头,解决跨域请求问题,No 'Access-Control-Allow-Origin' header is present on the requested resource

本文介绍了如何解决跨域请求问题,通过在服务器端设置“Access-Control-Allow-Origin”响应头来实现跨域访问。同时提到了对于SpringBoot项目,可以通过添加@CrossOrigin注解简化配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天被跨域请求的问题困扰了很久,跨域一句话的理解就是:服务端和请求端的地址不一样。

跨域的详细介绍可以参考:浏览器和服务器实现跨域(CORS)判定的原理,这里不多赘述。

我出现的问题,主要就是客户端向发送了服务端请求,服务器已经能返回数据,但是浏览器不接收。


Failed to load http://localhost:8080/XXXX: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

英语不是很好,根据翻译报错的内容大概就是:

未能加载这个地址(http://localhost:8080/XXXX)请求的资源,因为没有“Access-Control-Allow-Origin”这个响应头。因此,访问源(http://localhost:8081)不被允许接收这个资源。如果这个资源是你需要的,请将请求的模式设置为“no-cors”,以获取与CORS禁用的资源。

也就是说,从报错的内容来看,大概能有两种方式可以解决这个问题,一个是在服务器端设置这个响应头,第二就是设置CORS。但是对于初入门的小白来说,能有一个方法解决就已经很不错了。当然,网上找了一些资料,方法非常多,但是那些精髓的内容,我等小白实在参不透,没一个知道具体怎么用上去的。

后来在一位群里请教了一位大神,大神的回复也是比较简短:

“好像是在服务端的request设置ContentType可以解决”

我都快要哭了,好在都在群里,能继续追问,我马上截图服务端的代码给大神参考


等了一会,大神让我加上这个:

this.response.setHeader("Access-Control-Allow-Origin", "*");
this.response.setHeader("Cache-Control","no-cache"); 


生硬地加上去肯定是报错的:


而后我思考了一会,以前学Servlet的时候,doGet和doPost里面request和response基本都是成对出现的,所以我这里就加上了HttpServletResponse response,最后如下图所示,跨域访问可总算解决了。


为了感谢大神,我把QQ钱包仅剩的6.21元贡献了出来(原本想发6.66,结果不够钱),对大神表示诚挚的感谢!


其实,当自己这个流程走通了之后,有些地方自然就会明白了。我后端的代码是从其他的地方学习的,方法始终是死的,人是活的,这段代码只有request,没有response,因为request是处理客户端的请求等等,而当地址一样的时候自然不会出现跨域的问题。当理解了request是处理请求,response是返回结果,其实问题也就简单多了。


2018-05-17 更新:

最后发现,如果是使用Spring Boot创建的项目,直接添加一句注解到controller和方法就可以了。

@CrossOrigin

评论 77
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

潇I洒

创作不易,觉得有用就鼓励一下吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值