跨域解决方案

跨域解决方案五花八门,这里记录作者常用的几种

  • 跨域的本质是同源策略
  • 请求到服务器了,服务器拒绝响应

1. 前端跨域

解决方案:配置proxy代理跨域

原理:访问 localhost 请求转发到本地代理 proxy 服务器,peoxy 代理服务器通过请求转发和远程服务器进行数据交互。由于跨域只存在于 ajax(axios封装了ajax)请求中,所以proxy 代理服务器和远程服务器进行交互的时候不存在跨域问题。

请求链路:本地 <-> proxy代理服务器 <-> 远程服务器

1.1 vue (vue-cli脚手架)

1.1.1 配置跨域

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.edward.com:8090/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        // 请求到代理服务器时,将 '/api'去掉
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

1.1.2 使用

- 访问本地可用省略ip:端口(完整本地地址:http://localhost:8080/api/getDataPoint)
- /api/getDataPoint <=> http://www.edward.com:8090/getDataPoint
axios.get('/api/getDataPoint').then(res => {
  console.log(res)
})

1.2 react

之前笔记整理过,这里就不重复写了

配置文档:react配置proxy代理跨域


2. 后端跨域(Java)

下面几种方式本质上都是在响应头中加入参数,实现方式不同罢了

2.1 配置响应CorsFilter

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
 
 
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setMaxAge(3600L);
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

2.2 实现 WebMvcConfigurer 接口

这是 springboot2.x 版本的用法

@Configuration
public class WebMvcConfg implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时,**Origin不能为星号,需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }
}

2.3 使用注解(@CrossOrigin)

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
 
 
@Controller
@RequestMapping("/test")
@CrossOrigin
public class TestController{
 
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值