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);
            }
        };
    }
    }



二Vue(前端)


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


npm install axios


下载后在main.js进行配置


导入axios:import axios from 'axios'


全局使用axios:Vue.prototype.$axios=axios


Vueapp实例中导入:


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


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


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


打开vue.config.js


module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 将 /api 替换为空字符串,这样发送请求时就不需要再加上前缀了
        }
      }
    }
  }
}



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

相关文章
|
6天前
|
存储 缓存 安全
oss跨域资源共享(CORS Configuration)
oss跨域资源共享(CORS Configuration)
84 4
|
6天前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
133 4
|
6天前
|
前端开发 开发者
前端开发中的跨域资源共享(CORS)解决方案探讨
【2月更文挑战第2天】跨域资源共享(CORS)是前端开发中常见的问题,本文将深入探讨CORS的原理及解决方案,包括简单请求、预检请求以及常用的CORS解决方案,为前端开发者提供深入的理解和应对CORS问题的有效方法。
49 1
|
6天前
|
Java
springboot+cors跨域处理
springboot+cors跨域处理
26 0
|
6天前
|
前端开发 JavaScript API
探索前端开发中的跨域资源共享(CORS)
【2月更文挑战第3天】在前端开发中,跨域资源共享(CORS)是一个至关重要的话题。本文将深入探讨CORS的概念、工作原理以及如何在前端项目中正确配置和处理跨域请求,帮助开发者更好地理解和应用CORS技术。
30 7
|
6天前
|
前端开发 安全 JavaScript
前端开发中的跨域资源共享(CORS)机制
【2月更文挑战第3天】 在前端开发中,跨域资源共享(CORS)机制是一个重要的安全性问题。本文将介绍CORS的概念、原理和实现方式,并探讨在前端开发中如何处理跨域资源请求,以及如何提高网站的安全性。
|
5天前
|
存储 安全 前端开发
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
|
5天前
|
移动开发 JSON 前端开发
跨域资源共享(CORS):详解跨域请求的限制与解决方法
跨域资源共享(CORS):详解跨域请求的限制与解决方法
|
5天前
|
前端开发 安全 JavaScript
跨域资源共享(CORS)
跨域资源共享(CORS)
8 0
|
6天前
|
Java Spring
快速解决Spring Boot跨域困扰:使用CORS实现无缝跨域支持
这是一个简单的配置示例,用于在Spring Boot应用程序中实现CORS支持。根据你的项目需求,你可能需要更详细的配置来限制允许的来源、方法和标头。
29 3