对前后端分离的一些经验记录

Posted 2021-03-06 kinome

 

最近技术栈改为彻底的前后端分离，不是webapp那一套，所以碰到了跨域问题，刚开始是通过配置cors来解决，事实上也确实可以了，但是传自定义header头的时候，因为是复杂请求，所以一次请求两次动作，导致拿不到header头的值，因而采用代理的方式来解决跨域问题，先贴出之前的cors（cors这套，axios或者jqueryAjax都需要允许携带cookie发送请求）。

 

                <dependency>
                    <groupId>com.thetransactioncompany</groupId>
                    <artifactId>cors-filter</artifactId>
                    <version>2.5</version>
                </dependency>

 

package org.kosoku.commonfast.config.cors;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CORSFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

//   Access-Control-Allow-Origin 不能设置为 * 否则跨域时 sessionId 会发生改变，且设置了支持跨域，就不能设置为 * 了
//    需要允许特定头部字段，比如 Access-Control-Allow-Headers 设置为 x-token
//    前端axios不能关闭cookie跨域，Access-Control-Allow-Credentials也要设置为true，允许cookie跨域，否则将无法获取x-token头部信息

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Access-Control-Allow-Headers", "x-token");
        response.setHeader("Access-Control-Allow-Credentials", "true"); //是否支持cookie跨域 true为支持

        //添加这行代码，让OPTIONS请求通过
        if (request.getMethod().equals("OPTIONS")) {
            response.setStatus(HttpServletResponse.SC_OK);
        }

        filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override
    public void destroy() {

    }
}

 

事实上，只需要配置代理就可以了，nginx代理配置如下（可以作用于nginx的html下的页面，webpack打包的项目也可以放在里面）：

nginx根目录下的conf/nginx.conf

这里的代理是我的应用服务器地址，/common是我的api接口前缀，代理会这样拼接代理 http://192.168.31.178:60000/common （vue中的配置也是这样拼接）

proxy_pass 配置的路径，不要在后面加/

location /common {
   proxy_pass http://192.168.31.178:60000;
}  

 

vue项目中的配置：

config目录下的index.js

// 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    proxyTable: {
      ‘/api‘: { // 匹配所有以 ‘/api‘开头的请求路径
        target: ‘http://localhost:4000‘, // 代理目标的基础路径
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径: 去掉路径中开头的‘/api‘
          ‘^/api‘: ‘‘
        }
      }
    },

 

nginx下的html和vue（开发环境以及nginx下的生产版本），引用的资源直接写/common下的路径就行了。

vue需要重启才能应用配置文件。

 

参考：

https://blog.csdn.net/FullStackDeveloper0/article/details/85004667

https://www.jianshu.com/p/5ef2b17f9b25