1.前端ajax访问后端接口 在浏览器f12报错:
文字版:
Access to XMLHttpRequest at 'http://192.168.1.161:9000/query666' from origin 'http://192.168.1.161:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:9000/query666:1 Failed to load resource: net::ERR_FAILED
解决方法:
1.
什么是跨域?
跨域是指 不同域名之间相互访问。跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
2.
如何判断是否跨域?
同一协议,同一ip,同一端口,三同中有一不同就产生了跨域。
3
解决跨域的好处
在前后端分离的项目中,前端一般是通过Ajax请求接口,如果前端和后台不在同一个服务器和端口,那么就会出现跨域的问题。在完全的前后端分离中,前端一般是跨域。
4
如何解决跨域问题
新建一个环境类
@Configuration
public class CORSConfig extends WebMvcConfigurationSupport {
/*
* 这里主要为了解决跨域问题,所以重写addCorsMappings方法
*/
@Override
protected void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.exposedHeaders("access-control-allow-headers",
"access-control-allow-methods",
"access-control-allow-origin",
"access-control-max-age",
"X-Frame-Options")
.allowCredentials(false).maxAge(3600);
super.addCorsMappings(registry);
}
}