解决跨域问题

server/2024/11/18 14:32:06/

什么是跨域？

跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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*/@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/user/*") // 映射服务器中哪些接口允许跨域访问.allowedOrigins("http://localhost:8080") // 配置哪些来源有权限跨域访问.allowedMethods("GET", "POST", "DELETE", "PUT"); // 配置允许跨域访问的方法}
}

4、配置一个CorsFilter的Bean

@Configuration
public class MyCorsFilter {@Beanpublic CorsFilter corsFilter() {// 1.创建Cors配置对象CorsConfiguration config = new CorsConfiguration();// 支持域config.addAllowedOriginPattern("*");// 是否发送Cookieconfig.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));
}