CORS跨域问题（前后端全栈解决方式讲解）_后端在本地运行前端代码cors

跨域问题前后端解决方式（SpringBoot/Vue）

SpringBoot()

SpringBoot主要通过CORS策略解决跨域问题，这个函数的作用就是让本地端口开放。不控制外来端口调用。

@Configuration
public class CORS {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOriginPatterns("*")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true)
                        .maxAge(3600);
            }
        };
    }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二Vue（前端）

Vue的网络通信需要用到axios，所以先在项目中下载axios

npm install axios
1

下载后在main.js进行配置
导入axios:import axios from 'axios'
全局使用axios:Vue.prototype.$axios=axios
Vueapp实例中导入：

new Vue({
  axios,
  render: h => h(App),
}).$mount('#app')
1
2
3
4

最后设置它的基础URL:axios.defaults.baseURL = '/api';

这里的/api是跨域中我们自己设置的

打开vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 将 /api 替换为空字符串，这样发送请求时就不需要再加上前缀了
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这里就是设置跨域，然后再main.js的baseurl中配置我们/api的值就可以进行跨域的使用了，使用前，如果我们的前端没有设置默认的端口号，需要设置成非后端的端口号，再launch中设置。比如这里的后端端口号是8080，那么前端的端口号就要设置成8081.