后端使用springboot+tio-http-server，前端使用element-ui+websocket，如何解决跨域问题？后端已支持跨域
发布网友
发布时间：2022-11-19 23:17
共2个回答
热心网友
时间：2023-10-08 19:43
最便捷的还是使用nginx反向代理吧。
例如，假设后端的ip和端口号为：192.168.111.222:8080，前端的ip和端口号为：192.168.111.222:8001，此时前后端端口不一致导致跨域。
部署一个ngnix，修改ngnix安装目录下的/config/nginx.conf文件，刚安装的ngnix的配置文件里默认应该为：
在http的第一个server节点中后面再添加第二个代理项：
直接将第一组server节点复制一遍，然后修改其中的值为：
server {
listen 8001;
server_name 192.168.111.222;
location / {
root html;
index index.html index.htm;
}
location /api/ {
proxy_pass http://192.168.111.222:8080/;
proxy_set_header Host $http_host;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
这样，当前端访问http://192.168.111.222:8001/api/时，nginx会将请求代理到后端地址http://192.168.111.222:8080/
这是我某个nginx的配置项，用于获取本机的文件，模拟实现文件服务器：
配置好ngnix后，你前端工程里访问后端接口时，只需要将请求url修改为http://192.168.111.222:8001/api/即可。
例如你原来的登录后端接口可能是访问http://192.168.111.222:8080/login，你要修改为访问http://192.168.111.222:8001/api/login
热心网友
时间：2023-10-08 19:43
### 了解跨域请求
首先，让我们了解一下什么是跨域请求。跨域请求是指从一个域（域名、端口或协议）向另一个域发起HTTP请求。例如，从`http://example.com`向`http://api.example2.com`发起请求就是跨域请求。这是出于安全考虑而实施的浏览器同源策略的一部分。
### Spring Boot解决跨域问题的方式
#### 1. CORS配置
**CORS（跨域资源共享）**是一种允许服务器在响应中包含跨域请求所需的HTTP头的机制。在Spring Boot中，您可以使用`@CrossOrigin`注解来配置CORS。
```java
@RestController
@RequestMapping("/api")
public class MyController {
@GetMapping("/data")
@CrossOrigin(origins = "http://localhost:8081")
public ResponseEntity<String> getData() {
// 处理请求
}
}
```
在上面的例子中，`@CrossOrigin`注解允许来自`http://localhost:8081`域的请求访问`/api/data`端点。您可以根据需要配置不同的参数，如`origins`、`methods`和`allowedHeaders`等。
#### 2. 自定义过滤器
另一种解决跨域问题的方式是创建一个自定义的过滤器来处理跨域请求。通过实现`javax.servlet.Filter`接口，您可以完全控制请求和响应的头信息。
```java
@Component
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
httpResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
chain.doFilter(request, response);
}
// 其他方法
}
```
#### 3. Spring Security配置
如果您的Spring Boot应用程序使用了Spring Security，您可以通过配置Spring Security来解决跨域问题。
```java
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.cors().and()
.authorizeRequests()
.antMatchers("/api/**").permitAll() // 配置允许跨域的路径
.anyRequest().authenticated()
.and()
.httpBasic();
}
}
```
上面的配置允许所有`/api/**`路径的跨域请求，并要求进行基本身份验证。
### 总结
Spring Boot提供了多种方式来解决跨域请求的问题，包括CORS配置、自定义过滤器和Spring Security配置。您可以根据项目的需要选择最合适的方式。跨域请求的处理是现代Web应用程序开发中不可或缺的一部分，Spring Boot为处理这个问题提供了便捷的解决方案，使开发变得更加顺畅。希望本文能够帮助您理解并解决跨域问题。
