前后端解决跨域五种方案

注明:本文章以前端基于Axios解决和以springboot为基础后端解决方案


首先我们先了解一下跨域

  1. 为什么会出现跨域:出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。
  2. 什么跨域:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

我们简单的了解了跨域后直接上正片:怎么解决跨域?

 方案一:前端代理解决跨域

  •  vue代理服务器proxy跨域:通过请求本地的服务器,然后本地的服务器再去请求远程的服务器(后端部署接口的服务器),最后本地服务器再将请求回来的数据返回给浏览器(本地服务器和浏览器之前不存在跨域)

废话上说上代码

我们准备的请求url是localhost:8001/Axios 响应的结果就是简单的字符串

    @ResponseBody
    @GetMapping("/Axios")
    public String axios(){
        return "hello,world";
    }

 如何在vue里面优雅的解决跨域,路由冲突问题?

简单的代理:打开vue-cil中config中index.js找到代理字段 ,把所有的接口,同意规范为一个入口'api/*',在一定程度上会解决冲突

proxyTable: {
      '/api/*': {  //统一前缀
        targrt:'http://localhost:8001'
      }
<template>
  <div>
      <div >
           <div>{{values}}</div>
      </div> 
  </div>
</template>
<script>
export default {
    name:'frontout',
    data() {
        return {
            values:''
        }
    },
    mounted() {
        this.axios({
            url:'/api/Axios',
            method:'get',
        })
        .then(response=>(this.values=response.data))
        .catch(function(error){
            console.log(error);
        })
    },
}
</script>

 简单的代理已经可以解决单url请求跨域了

 当然单一的匹配并不是我们想要的结果 ,我们就可以使用一下方式来解决这个问题:

proxyTable: {
       '/api/**':{    //注意是双星
        target: "http://localhost:8001",
        changeOrigin: true, //如果设置成true:发送请求头中host会设置成target·
        pathRewrite: {
          '^/api':'/'
        }
      }

 同样会出现每次都要配置/api,当然对各位前端老手来说太简单了,全局默认Url(main.js中)

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
axios.defaults.baseURL='api'
mounted() {
        this.axios({
            url:'/Axios',
            method:'get',
        })

 简洁明了


 方案二:后端解决跨域(4种)

 一.添加映射路径和具体的CORS配置路径

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //放行哪些请求方式
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息
        config.addExposedHeader("*");
        //2. 添加映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
}

 二.重写WebMvcConfigurer中addCorsMappings方法(全局跨域)

  @Bean
    public WebMvcConfigurer MyWebMvcConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")

                        //放行哪些原始域
                        .allowedOrigins("*")
                        .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                        .allowedHeaders("*")
                        .exposedHeaders("*");
            }
        };

三.添加过滤器 

 

@Component
public class CrosFiter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        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,content-type");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {
        Filter.super.destroy();
    }
}

四.添加注解

    @CrossOrigin
    //@CrossOrigin(value = "http://localhost:8001")  //单独作用在url上
    @GetMapping("/Axios")
    public String axios(){
        return "hello,world";
    }

也可以添加在类上

@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {...}


个人还是推荐大家使用前端代理解决跨域 

  • 13
    点赞
  • 115
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
回答: 前后端跨域问题可以通过以下几种方式解决。首先,可以在后端设置响应头部信息,允许特定的域名访问接口,这样前端就可以跨域访问后端接口了。其次,可以使用JSONP(JSON with Padding)来实现跨域请求,JSONP利用了script标签不受同源策略限制的特性,通过动态创建script标签,将请求的数据作为参数传递给后端,后端返回的数据会被包裹在一个函数调用中返回给前端。另外,还可以使用CORS(Cross-Origin Resource Sharing)来解决跨域问题,CORS是一种基于HTTP头部的机制,通过在请求头中添加特定的字段,告诉浏览器允许跨域访问。最后,还可以通过代理服务器来解决跨域问题,前端发送请求到代理服务器,代理服务器再将请求转发给后端,这样就避免了浏览器的同源策略限制。以上是几种常见的解决跨域问题的方法。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [前后端解决跨域五种方案](https://blog.csdn.net/m0_58528901/article/details/123775417)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [前后端分离项目跨域问题及解决方案](https://blog.csdn.net/u010559460/article/details/105602272)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [解决前后端分离跨域问题的几种方法](https://blog.csdn.net/weixin_43986153/article/details/124465918)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值