在实际项目中，前后端分成两个不同的项目，各自部署在不同的域名下，这也就会遇到跨域问题了。
既然问题发生了，那就要从根本上去解决问题，在开始说解决方案前，我们有必要了解一下什么是跨域。
什么是跨域？
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
什么是同源策略？
所谓同源指的是：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。
同源策略它是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。
浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。
-
http://www.a.com/index.html调用http://www.a.com/user.jsp协议、域名、端口号都相同，同源。 -
https://www.a.com/index.html调用http://www.a.com/user.jsp协议不同，非同源。 -
http://www.a.com:8080/index.html调用http://www.a.com:8081/user.jsp端口不同，非同源。 -
http://www.a.com/index.html调用http://www.b.com/user.jsp域名不同，非同源。 -
http://localhost:8080/index.html调用http://127.0.0.1:8080/user.jsp虽然localhost等同于 127.0.0.1 但是也是非同源的。
同源策略限制的情况：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送
注意：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。
跨域流程
跨域访问示例
假设有两个网站，A网站部署在：http://localhost:8080 即本地ip端口8080上；B网站部署在：http://localhost:8081 即本地ip端口8081上。
现在B网站的页面想去访问A网站的信息，页面显示如下：
从错误信息可以看出以上出现了跨域问题！
如何解决跨域问题？
1、Filter过滤器
使用Filter过滤器来过滤服务请求，向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。
@WebFilter
public class CorsFilter implements Filter {
@Override
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", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(req, res);
}
}
2、继承 HandlerInterceptorAdapter
@Component
public class CrossInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
return true;
}
}
3、实现 WebMvcConfigurer
@Configuration
@SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")
public class AppConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 拦截所有的请求
.allowedOrigins("http://www.abc.com") // 可跨域的域名，可以为 *
.allowCredentials(true)
.allowedMethods("*") // 允许跨域的方法，可以单独配置
.allowedHeaders("*"); // 允许跨域的请求头，可以单独配置
}
}
4、使用Nginx配置
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
if ($request_method = 'OPTIONS') {
return 204;
}
}
5、使用 @CrossOrgin 注解
如果只是想部分接口跨域，且不想使用配置来管理的话，可以使用这种方式
在Controller使用
@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
@GetMapping("/{id}")
public User get(@PathVariable Long id) {
}
@DeleteMapping("/{id}")
public void remove(@PathVariable Long id) {
}
}
在具体接口上使用
@RestController
@RequestMapping("/user")
public class UserController {
@CrossOrigin
@GetMapping("/{id}")
public User get(@PathVariable Long id) {
}
@DeleteMapping("/{id}")
public void remove(@PathVariable Long id) {
}
}
总结
前端解决方案
- 使用 JSONP 方式实现跨域调用；
- 使用 NodeJS 服务器做为服务代理，前端发起请求到 NodeJS 服务器， NodeJS 服务器代理转发请求到后端服务器；
后端解决方案
- nginx 反向代理解决跨域
- 服务端设置
Response Header(响应头部)的Access-Control-Allow-Origin； - 在需要跨域访问的类和方法中设置允许跨域访问（如 Spring 中使用
@CrossOrigin注解）； - 继承使用Spring Web的 CorsFilter（适用于Spring MVC、Spring Boot）；
- 实现 WebMvcConfigurer 接口（适用于Spring Boot）；
作者：初念初恋
链接：https://juejin.cn/post/7203925850399555640
来源：稀土掘金
网友评论