Vue项目跨域问题

最新推荐文章于 2023-04-26 09:20:39 发布

墙角一颗草

最新推荐文章于 2023-04-26 09:20:39 发布

阅读量215

点赞数

分类专栏：方法文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_50981357/article/details/128554067

版权

方法专栏收录该内容

1 篇文章 0 订阅

订阅专栏

跨域是浏览器基于同源策略的安全措施，限制了非同源请求。CORS（跨域资源共享）通过特定的HTTP头解决这个问题，允许服务器声明允许的访问来源。在后端，如SpringBoot中，可以通过配置CORS过滤器来实现跨域，设置允许的源地址、请求头和请求方法。

摘要由CSDN通过智能技术生成

1.如何理解跨域

跨域的本质就是浏览器基于同源策略的一种安全手段。

同源必须有以下三个相同点：协议相同、主机相同、端口相同。任何一项不同即非同源请求，就会产生跨域。

2.CROS

CROS（Cross-Origin Resource Sharing），即跨域资源共享。它由一系列传输的HTTP头组成，这些HTTP头会决定浏览器是否阻止前端 JavaScript代码获取跨域请求的响应。根据该结构，在实现时只需要增加一些 HTTP头，让服务器声明允许的访问来源，只要后端实现了 CROS就实现了跨域。

3.CROS后端实现

package com.zgj.springboot.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        //设置哪些请求路径允许跨域
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //跨域策略设置
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}