解决跨域问题

什么是跨域？

跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。跨域只出现在前端，后端不会出现。

怎么解决跨域？

1、使用nginx转发

同源策略只限制于浏览器端的服务器，当后端服务器访问后端服务器时即使是非同源也是可以正常访问。

前端jQuery发送ajax请求

$.ajax({
    url: 'http://localhost:8081/cors/1',
    type: 'GET',
    success: function (result) {
        console.log(result);
    }
})

nginx配置 

    server {
        listen       8081;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

location /cors/ {
proxy_pass http://localhost:8080/user/;
}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        
    }

2、后端使用@CrossOrigin注解

@GetMapping("{id}")
@CrossOrigin("http://localhost:8081") // 跨域来源
public Result getUser1(@PathVariable Long id){
    User user = new User();
    return new Result<>(200, "success", user);
}

3、配置一个实现WebMvcConfigurer的配置类

@Configuration
public class CorsWebMvcConfigurer implements WebMvcConfigurer {
    /**
     * 全局Cors配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/user/*") // 映射服务器中哪些接口允许跨域访问
.allowedOrigins("http://localhost:8080") // 配置哪些来源有权限跨域访问
.allowedMethods("GET", "POST", "DELETE", "PUT"); // 配置允许跨域访问的方法
    }
}

4、配置一个CorsFilter的Bean

@Configuration
public class MyCorsFilter {
@Bean
public CorsFilter corsFilter() {
// 1.创建Cors配置对象
CorsConfiguration config = new CorsConfiguration();
// 支持域
config.addAllowedOriginPattern("*");
// 是否发送Cookie
config.setAllowCredentials(true);
// 支持请求方式
config.addAllowedMethod("*");
// 2.添加地址映射
UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
corsConfigurationSource.registerCorsConfiguration("/**", config);
// 3.返回CorsFilter对象
return new CorsFilter(corsConfigurationSource);
}
}

5、JSONP

只支持get请求，它会默认在请求中加上一个?callback=xxx的参数，它的值是随机的，这个值会作为秘钥的形式传给后端，你可以在ajax中通过jsonp:'a'、jsonpCallback:'cc'来设置它的名字和值

前端jQuery发送ajax请求

$.ajax({
    url: 'http://localhost:8081/cors/jsonp/1',
    dataType: 'jsonp',
    type: 'GET',
    success: function (result) {
        console.log(result);
    }
})

后端代码

@GetMapping("/jsonp/{id}")
public JSONPObject getUser(@PathVariable Long id, String callback) {
User user = new User();
return new JSONPObject(callback, new Result<>(200, "SUCCESS"，user));
}

原文地址：https://blog.csdn.net/sunyanchun/article/details/143824747

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！