前端跨域-实践篇

上文讲到浏览器因为安全的思考，设置了同源策略。这就是跨域的形成原因，也谈到了跨域的一些解决方案。

本文就上篇文章的实践，在项目开发时好作为参考资料。

在开始之前，先说说实验环境：

前端采用 Vue3 搭建，端口为 8080。

后端采用 Spring Boot 搭建，端口为 8888。

后端测试接口：

@RestController
public class HelloController {
    @GetMapping("/hello")
    public Map hello(){
        HashMap result = new HashMap();
        result.put("message", "Hello World!");
        return result;
    }
}

启动项目，测试一下：

curl localhost:8888/hello
{"message":"Hello World"}

解决前后端跨域可以说就是解决 AJAX 跨域。上文说到四种跨域方案，其中 CORS 和 代理服务器 为常见解决方案。

@CrossOrigin 可以用在类或者方法上：

@CrossOrigin(origins = "http://localhost:8080")
@RestController
public class HelloController

写在类上，表示该类的所有方法对应的接口浏览器都不会拦截。

@GetMapping("/hello")
@CrossOrigin(origins = "http://localhost:8080")
public String hello()

写在方法上，表示该方法对应的接口浏览器不会拦截。

创建一个类 CorsConfig，使用 @Configuration 标识它为配置类；实现 WebMvcConfigurer，重写 addCorsMappings 方法：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080");
    }
}

创建一个类 CorsFilter，使用 @Configuration 标识它为配置类；实现 Filter，实现 doFilter 方法：

@Configuration
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        filterChain.doFilter(request, response);
    }
}

更多 CORS 头部信息，可以 参考文档。

在前端代码中或者用浏览器打开前端监听的端口，输入以下 JavaScript 代码：

fetch('http://localhost:8888/hello')
.then(response => response.json())
.then(json => console.log(json))

返回：

{
    "message": "Hello World"
}

在开发过程中，前端会自己起一个服务来调试代码。于是 nginx 可以监听 80 端口，分别反向代理前端服务和后台服务。

server {
    listen 80;
    server_name 127.0.0.1;

    location / {
        proxy_pass http://127.0.0.1:8080;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8888/;
    }
}

前端写完代码之后，可以将代码打包成静态文件，使用 nginx 来解析。

server {
    listen 80;
    server_name 127.0.0.1;
    index index.html;
    root /home/kang/vue-demo/dist;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8888/;
    }
}

在前端项目中，或者用浏览器打开，输入下列代码：

fetch('/api/hello')
.then(response => response.json())
.then(json => console.log(json))

返回：

{
    "message": "Hello World"
}

在根目录中打开 vue.config.js（如果没有就新建）。写下如下语句：

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:8888",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

在前端项目中，或者用浏览器打开，输入下列代码：

fetch('/api/hello')
.then(response => response.json())
.then(json => console.log(json))

返回：

{
    "message": "Hello World"
}