跨域问题:“No 'Access-Control-Allow-Origin' header is present on the requested resource”

今天试了一下只用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

带着天使反上帝 - Kaybee

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值