【跨域问题】Access to XMLHttpRequest at ‘http://xxxx.com/xxx’ from origin ‘null’ has been blocked by

错误描述：项目中写了一个上传图片的接口；给到别人使用出现这个错误，具体分析原来是跨域报错；
ajax调用接口出现：Access to XMLHttpRequest at ‘http://xxxx.com/xxx’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
这是一个跨域请求报错。
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

ajax请求页面页面地址与Ajax所在页面地址不同源导致；

导致请求报错有三种原因:

1. 请求响应URL不同源；
2. 请求类型是xhr请求，也就是Ajax请求；
3. 浏览器的同源策略；

同时满足以上三种原因会出现跨域问题。

在另一个项目中模拟跨域请求，相关ajax代码：

var data = {"filename":"test","filepath":"D://a"}
$.ajax({
    type : "post",
    url : "http://localhost:8080/uploadImg/",
    contentType : 'application/json;charset=UTF-8',
    data : JSON.stringify(data),
    dataType:'json',
    success : function(date) {
        alert(date);
    }
});

解决方法：
由于我写的是Java后端接口给别人访问所以只能在后端解决，解决思路使用过滤器，就是在响应的首部信息中加入需要的首部信息字段，有两种解决方法：

第一种方法：自定义一个过滤器

package util;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CROSFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        String origin = request.getHeader("origin");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        filterChain.doFilter(req, res);
    }

    @Override
    public void destroy() {

    }
}

对应接口进行处理：

<!--跨域访问过滤器-->
  <filter>
    <filter-name>crosFilter</filter-name>
    <filter-class>util.CROSFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>crosFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <filter-mapping>
    <filter-name>charsetEncoding</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

第二种方法：@CrossOrigin 注解
@CrossOrigin 应用在方法上，默认情况下，@CrossOrigin允许在@RequestMapping注解中指定的所有源和HTTP方法；

@Controller
@RequestMapping("/user")
public class SysUserController {

    @CrossOrigin(origins = "http://test.com", maxAge = 3600)//指定源
    @RequestMapping("/nowTime")
    public String nowTime(HttpServletRequest request, HttpServletResponse response){
        String nowTime = sysUserService.getNowTime();
        System.out.println(nowTime);
        return nowTime;
    }
}

如果你有使用spring Security，在spring安全级别启用Cros，并允许它利用Spring MVC级别定义的配置；

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()...
    }

@CrossOrgin不起作用原因：
springMVC版本要在4.2以上；
有可能是请求格式问题，没有得到预期的响应；
在@RequestMapping指定get或者post请求；
@RequestMapping(value = "/nowTime" ,method = RequestMethod.POST)

代码007普通

打赏 收藏 海报 链接