解决前后端分离跨域问题的几种方法

一、前端解决跨域问题

1、前端解决跨域问题，一般都是在路由中配置后端相关参数

前端配置展示：

 devServer: {
    //是否自动打开浏览器
    open: true,
    //修改默认8080端口号
    port: 8081,
    //跨域,设置后端接口入口地址，/cxk/为代理地址必须有，为后端地址192.168.99.54，7676服务端口号
    proxy: {
      '/cxk/':{
        target: 'http://192.168.99.54:7676/',
        changeOrigin: true
      }
    }
  },

后端配置展示：

server:
#端口号
  port: 7676
#配置代理地址
  servlet:
    context-path: /cxk
 

二、后端结局跨域问题

1、后端添加配置类

package com.qiehua.config;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @Author 怯桦
 * @Date 2022-04-27 18:03
 * @Desc  跨域问题配置类
 * @Version 1.0
 */
@SpringBootConfiguration
public class MyWebConfigurer implements WebMvcConfigurer {
    /**
     * 所有请求都允许跨域，使用这种配置就不需要在interceptor中配置header了
     */
    @Override
    public void addCorsMappings(CorsRegistry corsRegistry){
        corsRegistry.addMapping("/**")
                .allowCredentials(true)
                .allowedOrigins("http://前端IP:端口号")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

2、在controller类或者下面的方法上加上@CrossOrigin注解

package com.icreate.controller;

import com.qiehua.CXK;
import java.util.List;

/**
 * @Author 怯桦
 * @Date 2022-03-14 11:03
 * @Desc 整个类都解决跨域问题
 * @Version 1.0
 */
@RestController
@CrossOrigin
public class VisitController {
   
    @PostMapping("/cxk/jntm")
    public List<CXK> register(@RequestBody CXK  cxk){
    return null;
}

package com.icreate.controller;

import com.qiehua.CXK;
import java.util.List;

/**
 * @Author 怯桦
 * @Date 2022-03-14 11:03
 * @Desc 单个方法解决跨域问题
 * @Version 1.0
 */
@RestController
public class VisitController {

    @CrossOrigin
    @PostMapping("/cxk/jntm")
    public List<CXK> register(@RequestBody CXK  cxk){
    return null;
}