跨域问题多种解决方案

最新推荐文章于 2024-04-04 08:21:11 发布

honchou56

最新推荐文章于 2024-04-04 08:21:11 发布

阅读量265

点赞数

分类专栏： java 文章标签： java ajax跨域问题

本文链接：https://blog.youkuaiyun.com/honchou56/article/details/110670701

版权

java 专栏收录该内容

2 篇文章

订阅专栏

一、概述

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求，所以就出现了一个跨域问题，特别是在前后端分离的情况下。

跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。
浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。

解决这类问题的办法有很多。

二、解决方案

通过前端使用Jsonp来解决，解决方法参照

https://blog.youkuaiyun.com/u014607184/article/details/52027879

通过Nginx来解决

#设置需要跨域的指定文件
location ^~/res/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET,POST';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    alias /data/web/res/;
}

#设置允许全局跨域
server {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET,POST';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-	Since,Cache-Control,Content-Type,Authorization';  
}

springboot的处理方法

import org.springframework.context.annotation.Configuration; 
import org.springframework.web.servlet.config.annotation.CorsRegistry; 
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; 

@Configuration 
public class CorsConfig extends WebMvcConfigurerAdapter { 

    @Override 
    public void addCorsMappings(CorsRegistry registry) { 
        registry.addMapping("/**") 
                .allowedOrigins("*") 
                .allowCredentials(true) 
                .allowedMethods("GET", "POST", "DELETE", "PUT") 
                .maxAge(3600); 
    } 
}

springMvc是采用过滤器的方式，然后将写好的过滤器配置到Web.xml中。

public class CORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");
        chain.doFilter(req, res);
    }
    
    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

如果想要更明确的指定是哪一个请求允许跨域，则可以使用@CrossOrigin注解，将这个注解标注在相应的controller类中。

@CrossOrigin(origins = "http://192.205.15.10:8080", maxAge = 3600)
@RequestMapping("/hello")
@RestController
public class HelloController{
    
}

如果是调用其他系统中的请求获取JSON格式数据，则可以统一转到后台通过httpClient调用，请求提到的数据原原本来的返回。