H5W3
当前位置:H5W3 > java > 正文

【Java】前端和后端相关跨域问题?请看具体详情.

本人做了一个前后端分离,前端用vue.js,后端用springboot.
前端部署服务器,后端也部署服务器
情况一:假如前端部署在192.186.44.11:8080,
那我在前端调用192.156.44.7:9090失败,但是调用调用部署在跟前端ip端口一样的192.186.44.11:8080接口能成功
注:前面一个ip与前端不相同.另一个ip与前端服务相同
情况二:假如前端部署在192.186.44.11:8080,
那我在前端调用192.156.44.7:9090失败,192.186.44.12:8080接口失败
注:ip都不同
情况三:假如前端部署在192.186.44.11:8080,
调用调用部署在跟前端ip端口一样的192.186.44.11:8080接口能成功,
注:三者(一个前端二个后端服务ip都相同).
我这边情况三不能实现,因为是前人写的代码,不宜修改
请问有什么方法可以解决?

回答

首先你需要明确跨域的含义。

  1. 域名不同,跨域!
  2. 端口不同,跨域!

其次,如果出现跨域的情况,解决方案有两种,分为前端,后端两种均需要修改配置:

1.前端

修改vue项目config下的index.js,招到proxyTable

添加一下代码:

'/api': { //替换代理地址名称
      target: 'http://api.douban.com/', //代理地址
     changeOrigin: true, //可否跨域
     pathRewrite: {
     '^/api': '' //重写接口,去掉/api
    }
}

2.后端

配值全局过滤器,允许全部/个别ip,端口,请求方式访问

import javax.servlet.*;  
import javax.servlet.http.HttpServletResponse;  
import java.io.IOException;  
   
@Component  
public class CorsFilter implements Filter {  
  
    final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);  
 
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  
        System.out.println("*********************************过滤器被使用**************************");  
        chain.doFilter(req, res);  
    }  
    public void init(FilterConfig filterConfig) {}  
    public void destroy() {}  
}  

跨域是比较常见的问题,方法很多,看你想用那种了,比如proxyTable/cors/jsonp什么的,你自己查一下分析一下自己的情况吧

本文地址:H5W3 » 【Java】前端和后端相关跨域问题?请看具体详情.

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址