跨域问题:“No 'Access-Control-Allow-Origin' header is present on the requested resource”
来源:互联网 发布:理想 知乎 编辑:程序博客网 时间:2024/06/05 12:38
今天试了一下只用SpringMVC写接口,然后用本地的 ajax 去访问接口请求 json 数据,但浏览器报了一个“跨域”请求的错误,个人理解的跨域问题是,服务端和客户端的请求不在同一个域名下,但是我这都是在本机上部署的呀,这是什么问题呢?
原来我理解的“跨域”只是我个人的理解,在网上搜索解决方法,都是在SpringMVC 的服务器中写一个过滤器 Filter ,让 Filter 拦截请求,在response返回的时候加上一些请求头,这样就可以解决跨域的问题,类似于下面这样:
package com.kay.filter;import javax.servlet.*;import javax.servlet.http.HttpServletResponse;import java.io.IOException;/** * Created by kay on 2017/12/7. */public class CrossFilter implements Filter{ public void init(FilterConfig filterConfig) throws ServletException { } public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse response= (HttpServletResponse) servletResponse; String origin= servletRequest.getRemoteHost()+":"+servletRequest.getRemotePort(); response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Headers", "Authentication"); /* response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE"); response.setHeader("Access-Control-Max-Age","3600"); response.setHeader("Access-Control-Allow-Credentials","true");*/ filterChain.doFilter(servletRequest,servletResponse); } public void destroy() { }}
然后在web.xml中配置一下filter:
<filter> <filter-name>cors</filter-name> <filter-class>com.kay.filter.CrossFilter</filter-class> </filter> <filter-mapping> <filter-name>cors</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
而在前端请求中,ajax 参数中的 dataType 要改为 “text”,不支持 dataType:”json”:
$.ajax({ url:"http://localhost:8081/list", type:"GET",//请求方式 dataType:"text",//返回参数的类型 text/html success:function (data) {//请求成功后调用的函数 alert("succ:"+data); }, error:function (textStatus) {//请求失败后调用的函数 alert("fail"); } })
为什么要加像 ”Access-Control-Allow-Origin“ 这样的响应头就能解决跨域问题呢?
跨域请求又叫,”跨域资源共享”(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。
服务器会检查 浏览器的请求中是否 有 ”Origin“请求头,它是在跨域请求发出的时候 由浏览器自动加上的,然后服务器检查这个 请求头设置的 服务器的源(来自于哪里)来判断是否响应,是否允许这个请求访问,我们会看到设置response.setHeader("Access-Control-Allow-Origin", "*");
它的意思就是允许所有的源访问服务器,也可以只将自己的源(域名)设置就不允许其他的源访问。
更加详细的解释,
请访问 阮一峰 老师的日志《跨域资源共享 CORS 详解》http://www.ruanyifeng.com/blog/2016/04/cors.html
- 跨域问题: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
- js跨域访问,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. Origin is therefore no
- No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '***' is theref
- No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '
- No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
- 本地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跨域访问解决方案
- 关于springmvc跨域请求 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.'Ajax跨域访问解决方案
- (转)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”
- 论文笔记 [1] Deep Image Prior
- HTML——<body>标签
- Zookeeper介绍和使用
- 论JAVA语言的优缺点
- HackerRank难题记录
- 跨域问题:“No 'Access-Control-Allow-Origin' header is present on the requested resource”
- Android自定义EditText——带一键清除和密码明文切换按钮,支持多样式选择
- 指针容器库
- 初识html5的基本标签--P标签
- POJ 刷题系列:2159. Ancient Cipher
- HTML5桌面通知之笔记:Notification-API
- 导入项目到IDEA中引用不到HttpServletRequest
- 汉诺塔问题
- NEUQOJ 1317: 【白书习题第三章】手机键盘