zoukankan      html  css  js  c++  java
  • 对前后端分离的一些经验记录

    更新:之所以在开启cors的时候,axios需要携带cookie、后端cors filter需要放通cookie,就是因为jsessionId需要携带上去(cors这套跨域还得设置response header里的允许的请求头,就是 response.setHeader("Access-Control-Allow-Credentials", "true"); 这段);同理:即便使用代理跨域,axios也需要允许携带cookie(因为jsessionId需要在header里验证),jquery ajax倒是还没出过问题。

    最近技术栈改为彻底的前后端分离,不是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项目中的配置:

    (这个仅适用于开发环境,生产环境需要配置nginx的代理才能生效)

    config目录下的index.js(vue-admin-template中为vue.config.js),module.exports 节点下的 devServer 下(参考webpack文档即可):

    // 代理配置表,在这里可以配置特定的请求代理到对应的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

  • 相关阅读:
    初始mysql语句
    MySQL 数据库 的安装和基本管理
    POJ 3685
    总结-LCT
    $亲属关系$
    一:包装好和吹出去 二:三国心得
    创业心得
    阿里前CEO卫哲的万字长文:被马云骂醒,看透B2B 10大核心问题!
    英雄不问出处, 看看商界大佬年轻时受过的苦
    最应该富养的,不是孩子是妻子!
  • 原文地址:https://www.cnblogs.com/kinome/p/12468355.html
Copyright © 2011-2022 走看看