前端请求跨域的两种解决方案

跨域问题

• 只要协议、主机、端口之一不同，就不同源，例如
  • http://localhost:7070/a 和 https://localhost:7070/b 就不同源
• 同源检查是浏览器的行为，而且只针对 fetch、xhr 请求
  • 如果是其它客户端，例如 java http client，postman，它们是不做同源检查的
  • 通过表单提交、浏览器直接输入 url 地址这些方式发送的请求，也不会做同源检查
• 更多相关知识请参考
  • 跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

请求响应头解决

• fetch 请求跨域，会携带一个 Origin 头，代表【发请求的资源源自何处】，目标通过它就能辨别是否发生跨域
  • 我们的例子中：student.html 发送 fetch 请求，告诉 tomcat，我源自 localhost:7070
• 目标资源通过返回 Access-Control-Allow-Origin 头，告诉浏览器【允许哪些源使用此响应】
  • 我们的例子中：tomcat 返回 fetch 响应，告诉浏览器，这个响应允许源自 localhost:7070 的资源使用

@RestController
public class StudentController {

    @Autowired
    private StudentService studentService;

    @GetMapping("/api/students")
    @CrossOrigin("http://localhost") //返回 Access-Control-Allow-Origin 头,允许http://localhost源此响应,使用*代表所有源可以使用
    public R all() {
        return R.ok(studentService.findAll());
    }
}

代理解决

npm install http-proxy-middleware --save-dev

在 express 服务器启动代码中加入

import {createProxyMiddleware} from 'http-proxy-middleware'

// ...

app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));

fetch 代码改为

const resp = await fetch('http://localhost:7070/api/students')

或

const resp = await fetch('/api/students')