前端、后端、代理解决跨域问题
1.什么是跨域问题？
  在浏览器⾥，为了安全着想，⼀般只会允许同源之间交互，同源：同⼀协议，同⼀端⼝号，同⼀域名。跨域指的就是⾮同源之间的访问。
  如果你是在本地搭建的前后端分离的项⽬，那么就会存在这个问题。
2.跨域有哪些解决⽅式
  2.1 浏览器
    既然同源是因为浏览器带来的，其实只要把浏览器的安全策略关闭，那么就可以解决了，当然，这是最基本的问题
  2.2 前端
    前端如果你⽤的是Vue，那么可以通过设置代理的形式；如果你⽤的不是Vue，可以通过使⽤Nginx
    在Vue的根⽬录下，到fig.js，输⼊以下代码：
//相当于webpack-dev-server,  对本地服务器进⾏配置
devSever : {
proxy:  {
"/api" : {
target: " localhost:3000 ",  //需要跨域的⽬标url ，我这⾥是⾃⼰本地起的⼀个服务端⼝
changeOrigin: true,          // 将基于名称的虚拟托管⽹站的选项，如果不配置，请求会报404
ws:  true,
pathRewrite: {
" ^/api " :  ""          //若请求的路径在⽬标url下但不在/api 下，则将其转换成空
}
}
}
}
}
  3.3 后端
    后端我开发的时候⽤的是springboot
    3.3.1 如果要细分到每个⽅法，推荐使⽤注解@Crossorigin
      @CrossOrigin有⼏个主要的参数，
      originPatterns：源模板，默认值是*
      allowedHeaders：允许的请求头，默认值是*
1 @CrossOrigin(originPatterns = {"*"}, allowedHeaders = "*")
2 @RestController
3public class paperController {
4    @Value("${file.upload.abspath}")
5private String abspath;
6    @Value("${file.upload.mdImageDir}")
    3.3.2 实现⼀个配置类，需要继承于WebMvcConfigurer。@Configuration表⽰这是⼀个配置类，交给spring管理。然后需要重写⽗⽅法
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowedMethods("*")
.allowedOriginPatterns("**")                .allowCredentials(true);
}
前端跟后端哪个就业难}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。