Vue SpringBoot 跨域訪問

Vue

• api(comApi.js)

export function testAPI (data) {
	return fetch('post','/api/getuser',data)
} 

• 代理(config/index.js)

    port: 8080, // can be overwritten by process.env.PORT, 
    //if port is in use, a free one will be determined
    
    autoOpenBrowser: true,
    // proxyTable: {},
    proxyTable: {
        '/api': {
            target: 'http://127.0.0.1:8090/', // 后端訪問域名
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/' //由於后端的訪問路徑沒有'/api',所有替換為'/'
            }
        }
    },

• 這個是我的項目結構
  

SpringBoot

• 設置允許跨域訪問

@Configuration
public class CrosConfig extends WebMvcConfigurationSupport {
    //@Configuration:
    // Spring 容器在啟動時，會加載默認的一些PostPRocessor，其中就有 ConfigurationClassPostProcessor，
    // 這個后置處理程序專門處理帶有@Configuration注解的類，這個程序會在bean定義加載完成后，
    // 在bean初始化前進行處理。其主要處理的過程就是使用 cglib 動態代理對類進行增強，
    // 使用增強后的類替換了beanFactory原有的 beanClass，增強類會對其中帶有@Bean注解的方法進行額外處理，
    // 確保調用帶@Bean注解的方法返回的都是同一個實例。


    //跨域訪問
    @Override
    protected void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("*");
    }


}

• 訪問的接口

@RestController
public class UserController extends BaseController {
    @RequestMapping("/getuser")
    public CommonReturnType getUser(@RequestParam(required = false,name = "id") Integer id) throws BusinessException {
        UserModel userModel = userSrv.queryUserById(id);
        if (null == userModel)
            throw new BusinessException(EmBusinessError.USER_NOT_EXIST);
        System.out.println(userModel.toString());
        UserVo userVo = new UserVo();
        BeanUtils.copyProperties(userModel, userVo);
        return CommonReturnType.sendResponse(userVo);
    }
}

結果

最終很神奇的http://localhost:8080/api/getuser ==> http://localhost:8090/getuser

菜鳥小小只,也是偶然做這個,自己也是似懂非懂,僅為記錄下來,免得以后忘記