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

短命女 2023-06-25 11:30 107阅读 0赞

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

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

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

![70][]

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可以解决”

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

![70 1][]

等了一会，大神让我加上这个：

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

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

![70 2][]

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

![70 3][]

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

![70 4][]

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

2018-05-17 更新：

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

@CrossOrigin

![70 5][]

[CORS]: https://blog.csdn.net/zmx729618/article/details/53319383
[70]: https://img-blog.csdn.net/20180515165950835?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RnOTI4NjAwNzc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180515171556375?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RnOTI4NjAwNzc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180515171738169?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RnOTI4NjAwNzc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180515171759114?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RnOTI4NjAwNzc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180515172336733?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RnOTI4NjAwNzc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/2018051717433850?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RnOTI4NjAwNzc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

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

相关快速解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案

相关 Post request is No 'Access-Control-Allow-Origin' header is present on the requested resource跨域问题解决

相关完美解决Springboot跨域（No 'Access-Control-Allow-Origin' header is present on the requested resource）

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource'，跨域访问的解决方法

相关跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource

相关解决ajax中No ‘Access-Control-Allow-Origin‘ header is present on the requested resource跨域问题

相关报错：跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关 ajax 跨域访问 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource