当前位置:首页 » 《随便一记》 » 正文

前后端跨域问题(解决方向和思路)

20 人参与  2024年05月16日 15:07  分类 : 《随便一记》  评论

点击全文阅读


前后端跨域问题(解决方向和思路)

什么是跨域?1.前端配置代理解决1.1前端代理配置失效的原因 2.nginx配置代理解决3.后端代码解决

什么是跨域?

浏览器的同源策略是跨域问题的根本所在。同源策略是一个非常重要的安全策略,它用于限制两个源之间在浏览器上进行资源交互。如果缺少了同源策略,网站或服务器很容易受到 XSS、CSFR 等攻击。

那么同源是什么意思?同源表示两个 URL 的 origin(源、请求头) 是相同的,origin 由 protocol(协议)host(域名)port(端口) 组成。

简单一点就是指 协议,域名,端口都要相同,其中有一个不同都会产生跨域

1.前端配置代理解决

前端实现跨域,即配置 devServer(开发服务器) -仅用于本地开发调试使用,正式还得靠nignx
每个不同前端框架配置devServer的位置不一样
我这边是vue框架,所以是vue.config.js

// vue.config.js  devServer: {  //开启代理服务器    proxy:{      "/api": {  // /api是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会走到代理来。          target: "http://www.aaabbbccc.com", // 需要代理的域名,目标域名,会替换掉匹配字段之前的路径           ws: false, // 是否启用websockets          changeOrigin: true, //是否跨域          pathRewrite: {  //重写匹配的字段,如果不需要放在请求路径上,可以重写为""              "^/api": ""          }      },     },  }

参考文章(更详细)
【1】https://blog.csdn.net/tttttrrrhh/article/details/127685318
【2】https://blog.csdn.net/X_W123/article/details/120369610?spm=1001.2014.3001.5506

以上配置中,我配置了一个 /api,只有包含这个请求的路径才会走代理,例如:

http://localhost:8080/api/login //这个就可以走代理
http://localhost:8080/login //这个就不行

转换步骤

此时我发送的请求就是:

http://localhost:8080/api/login
http://localhost:8080/api/user/hello

遇到 包含”/api“ 的才起效

通过代理的 target 属性加工之后就是 :

http://www.aaabbbccc.com/api/login
http://www.aaabbbccc.com/api/getlist

在通过 pathRewrite属性 将 /api 替换为空 为:

http://www.aaabbbccc.com/login
http://www.aaabbbccc.com/user/hello

示例图
在这里插入图片描述

1.1前端代理配置失效的原因

如果出现配置失效的可能
发现明明后台接口存在前缀了,但是为什么没有将它代理剔除转发操作呢?
问题如下:
1.pathRewrite写错了(仔细注意大小写)
2.代理是代理我这个服务下面的请求url,对我服务下的请求进行代理剔除转发操作,
是无法对不是我服务下url进行代理操作的。
例如:
我前端服务启动起来,ip端口为localhost:8080(端口不自定义且未占用的情况下,默认是8080)
这个时候我前端调用后台的接口名称为
127.0.0.1:8341/api/getUser(F12看到的)
想通过代理去除"api"这个前缀配置了一个

devServer: {  //开启代理服务器    proxy:{      "/api": {  // /api是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会走到代理来。          target: "127.0.0.1:8341", // 需要代理的域名,目标域名,会替换掉匹配字段之前的路径           ws: false, // 是否启用websockets          changeOrigin: true, //是否跨域          pathRewrite: {  //重写匹配的字段,如果不需要放在请求路径上,可以重写为""              "^/api": ""          }      },     },  }

结果发现根本没有起效,最后搞了半天,才明白 “代理是代理这个服务下面的请求url”
把前端调用后台的接口改为
127.0.0.1:8080/api/getUser(F12看到的)
这个时候以上的代理配置就起效了,达到了我想要的效果
127.0.0.1:8080/api/getUser ——> 127.0.0.1:8341/getUser

2.nginx配置代理解决

参考文章(更详细)
【1】https://blog.csdn.net/qq_20236937/article/details/128151067?spm=1001.2014.3001.5501(nginx 前端及后端接口代理配置)

# 请求路径为:http://127.0.0.1:8080/api/getUser   实际代理为:http://127.0.0.1:8000/getUser    location ^~/api/ {      proxy_pass http://127.0.0.1:8000/;      proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号      proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址    }

3.后端代码解决

参考文章(更详细)
【1】https://blog.csdn.net/lidongkui123/article/details/123720743(JAVA Java 解决跨域问题)

一、使用Filter方式进行设置

@WebFilterpublic class CorsFilter implements Filter {      @Override    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", "*");          response.setHeader("Access-Control-Max-Age", "3600");          response.setHeader("Access-Control-Allow-Headers", "*");        response.setHeader("Access-Control-Allow-Credentials", "true");        chain.doFilter(req, res);      }  }

二、继承 HandlerInterceptorAdapter

@Componentpublic class CrossInterceptor extends HandlerInterceptorAdapter {    @Override    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {        response.setHeader("Access-Control-Allow-Origin", "*");        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");        response.setHeader("Access-Control-Max-Age", "3600");        response.setHeader("Access-Control-Allow-Headers", "*");        response.setHeader("Access-Control-Allow-Credentials", "true");        return true;    }}

三、实现 WebMvcConfigurer

@Configuration@SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")public class AppConfig implements WebMvcConfigurer {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")  // 拦截所有的请求                .allowedOrigins("http://www.abc.com")  // 可跨域的域名,可以为 *                .allowCredentials(true)                .allowedMethods("*")   // 允许跨域的方法,可以单独配置                .allowedHeaders("*");  // 允许跨域的请求头,可以单独配置    }}

四、使用Nginx配置 (有风险)

location / {   add_header Access-Control-Allow-Origin *;   add_header Access-Control-Allow-Headers X-Requested-With;   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;   if ($request_method = 'OPTIONS') {     return 204;   }}

点击全文阅读


本文链接:http://zhangshiyu.com/post/109556.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1