项目支持跨域访问 -java

佳琪 的个人博客 记录精彩的程序人生,你累或不累,都无路可退 本文由博客端 http:// 主动推送

前后端分离项目

SpringBoot - vue 3.0

跨域设置

Java 后台配置跨域

package com.xd.pre.common.config;

import org.apache.commons.lang3.StringUtils;
import org.springframework.context.annotation.Configuration;

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

/**
 * @author Judge
 * @date 2020/8/10 15:45
 */
@Configuration
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        // 不使用*,自动适配跨域域名,避免携带Cookie时失效
        String origin = request.getHeader("Origin");
        if(StringUtils.isNotBlank(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        // 自适应所有自定义头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if(StringUtils.isNotBlank(headers)) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        // 允许跨域的请求方法类型
        response.setHeader("Access-Control-Allow-Methods", "*");
        // 预检命令(OPTIONS)缓存时间,单位:秒
        response.setHeader("Access-Control-Max-Age", "3600");
        // 明确许可客户端发送Cookie,不允许删除字段即可
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }


}

2.VUE 本地开发环境配置

module.exports = {
  dev: {
    host: '127.0.0.1',
    port: 8084,
    open: true,// vue项目启动时自动打开浏览器
    proxy: {
      '/api': { // '/api'是代理标识,用于告诉node,url前面是/api的就是使用代理的
        target: "http://localhost:8080", //目标地址,一般是指后台服务器地址
        changeOrigin: true, //是否跨域
        pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
          '^/api': "" 
        }
      }
    }
  }
}

配置完成后,我们发起的每次 http 请求的 Request Url 的前面一部分都会和我们本地的源一样;

举例:

Axios.get("/api/XX")

我们项目跑在开发环境下的 http://localhost:8080 上,那么上述请求的 Request Url 的就是 http://localhost:8080/api/XX;这应该就是我们的代理服务器中该资源的地址,与客户端同源;而数据的实际来源则是 http://localhost:8080/api/XX,这样即实现代理跨域;

Nginx 代理——生产环境

nginx 版本:1.16.1

修改 nginx.conf 文件下的 serve 下配置:

**

        listen       80;  //端口号
        server_name  localhost; 
        // 打包之后项目放到的路径;
        location / {
            root   dist;  // dist是指和nginx.exe同级的dist目录 ,一般默认是html文件夹
            index  index.html index.htm;  // dist文件夹下的html文件
        }
        // 此处是服务器代理部分,为解决http请求跨域问题
        // 若服务器已设置允许跨域,则这块就不需要了
        location  ^~api{
            proxy_pass http://127.0.0.1:8080/api; 
                // 被代理服务器地址
        }
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    2780 引用 • 8037 回帖 • 764 关注
  • 跨域
    18 引用 • 95 回帖
1 操作
judge 在 2020-08-10 16:37:30 更新了该帖

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...