跨域

什么是跨域

跨域指的是一个域（比如 example.com）下的Web应用尝试去请求另一个域（比如 api.example.org）的资源。由于浏览器的同源策略限制，直接的跨域请求通常是被禁止的，以防止潜在的安全风险。CORS（Cross-Origin Resource Sharing）是一个协议，它允许服务器通过设置特定的HTTP响应头来放宽这个限制，从而允许某些跨域请求。

假如现在的页面是 http//:localhost:5173(Vue页面)，访问后端服务器 http//:localhost:8080(SpringBoot)，那么就属于跨域了。

只有浏览器端才存在跨域问题。

就是说在前端页面，通过 fetch、axios、vue-resource等ajax请求方式，向后端服务器发起请求。

不通过浏览器，选择使用代理，让前端服务器访问后端服务器，就可以拿到数据。

跨域：不同域名，不同端口，不同协议

如果是 http://localhost:8080/a 和 http://localhost:8080/b，那么属于同域，不跨域。

怎么解决

SpringBoot 跨域

方法上添加注解 @CrossOrigin

1
2
3
4
5
6
7
8
9
@RestController
public class TestController {

    @CrossOrigin
    @GetMapping("/test")
    public String test() {
        return "hello world";
    }
}

Vue 跨域

在vue设置代理，让请求先转发到前端服务，再由前端服务转发到后端服务。

前端服务的源是 http://localhost:5173，后端服务的源是 http://localhost:8080。

只有浏览器有同源策略，服务器就没有限制，让前端服务代理请求，就代替浏览器向后端服务器发起请求，后端服务器返回数据，前端服务再返回给前端。

1
2
3
4
5
6
7
8
9
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080'.
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}