专栏首页技术进阶之路SpringBoot 跨域问题:Access to XMLHttpRequest at ‘***‘ from origin ‘***‘ has been blocked by CORS policy

SpringBoot 跨域问题:Access to XMLHttpRequest at ‘***‘ from origin ‘***‘ has been blocked by CORS policy

Access to XMLHttpRequest at 'http://127.0.0.1:9002/business/admin/chapter/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS 跨站点资源分享,属于跨域问题,同个 IP 的不同端口间的访问也属于跨域。

前后端分离必然有跨域问题。

一、SpringBoot项目

对于 SpringBoot 项目,可以新建一个配置类:

package com.lsu.server.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 处理跨域问题
 *
 * @Author wang suo
 * @Date 2020/10/10 0010 21:37
 * @Version 1.0
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        /*
         * 一小时内不需要再预检
         */
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .maxAge(3600);
    }
}

二、SpringCloud项目

通过 spring cloud gateway 实现

2.1、代码实现

如果项目中有网关,可以选择在主启动类中注册 CorsWebFilter 类:

/**
 * 1.允许cookies跨域
 * 2.允许向该服务器提交请求的URI,*表示全部允许,在SpringMVC中,如果设成*,会自动转成当前请求头中的Origin
 * 3.允许访问的头信息,*表示全部
 * 4.预检请求的缓存时间(秒),即在这个时间段里,对于相同的跨域请求不会再预检了
 * 5.允许提交请求的方法,*表示全部允许
 *
 * @return 返回 reactive 包下的 CorsWebFilter 对象
 */
@Bean
public CorsWebFilter corsWebFilter() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.setMaxAge(3600L);
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsWebFilter(source);
}

2.2、配置实现

也可以在 application.yml 文件中做如下配置:

server:
  port: 9000

spring:
  application:
    name: online-course-gateway
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848 #配置 Nacos 地址
    # 路由转发: 意思是只要是以 /system 开头的路径都转发到 9001: 这样就可以做到对外隐藏,表面上访问的是 9000 实际上是 9001
    gateway:
      routes:
        - id: system
          uri: lb://online-course-system
          predicates:
            - Path=/system/**
        - id: business
          uri: lb://online-course-business
          predicates:
            - Path=/business/**
      # 全局跨域
      globalcors:
        # 跨域配置(可以在代码里面处理允许跨域,也可在这里全局处理)
        corsConfigurations:
          '[/**]':
            allowedOrigins: "*"
            allowedHeaders: "*"
            allowCredentials: true
            allowedMethods:
              - GET
              - POST
              - OPTIONS
              - DELETE
              - PUT
              - HEAD
              - PATCH

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 Django + Vue.js 开发个人博客网站(完整版附源码)—— Python-课程设计-期末项目

    本文主要讲解 Python 后端部分,由于仅仅用到了 vue 作为 js 框架并非前后端分离项目,故前端不单独介绍。

    wsuo
  • 使用 freemarker 制作代码生成器

    在开发的过程中发现有大量的重复代码,比如 Controller 和 Service 以及 Mapper 和实体类,后两者都可以使用 Mybatis 自动生成,前...

    wsuo
  • 前后端分离中使用 Session 域传输对象

    前端使用 Vue,后端使用 SpringBoot 框架,使用 Session 传值后端获取不到。

    wsuo
  • Python+Selenium笔记(三):使用unittest

    #网络很慢可能会运行报错 (一)   前言 Selenium WebDriver是一个浏览器自动化测试的API集合。它提供了很多与浏览器自动化交互的特性,并且这...

    free赖权华
  • 测试驱动之xml文件的处理

    Xml是可扩展标记语言,关于xml的技术本人这里不在介绍,感兴趣的同学可以去w3c看看详细的资料,这里,我仅仅介绍的是如何获取xml文档结构中的...

    无涯WuYa
  • 一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

    selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样,是爬复杂动态网页的必备工具。支持的浏览...

    Python进阶者
  • 假期苦短,我用Python!这有个自动回复拜年信息的小程序

    大年三十到年初一,有没有也被拜年短信(大部分是群发)搞得很焦虑?不回复似乎显得很没有礼貌,一一回复又累心劳神。

    大数据文摘
  • 持续集成利器,GitHub Actions

    GitHub Actions 是 GitHub 推出的持续集成服务,于 2018 年 10 月推出,目前已经可以投入到正式环境中使用。

    灵魂画师牧码
  • java服务端推送消息有那么难吗?

    今天项目经理交给我一个开发任务。如果有人在前台下了订单就给后台仓库管理一个发货通知。也就是服务端触发一个事件,推送消息到客户端。

    码农小胖哥
  • PHP简单的获取用户IP,系统,浏览器等信息

    在使用浏览器发起的 HTTP 请求中,通常会包含一个识别标识。它名为 User Agent,简称 UA。它是一串包含了客户端基础信息的字符串。通过它可以方便的获...

    周俊辉

扫码关注云+社区

领取腾讯云代金券