Access to XMLHttpRequest at ‘httpxxxx‘ from origin ‘httpxxxx‘ has been blocked by CORS policy

在前后端分离项目中遇到CORS跨域问题,表现为XMLHttpRequest请求被CORS政策阻止。错误源于缺少'Access-Control-Allow-Origin'头。解决方案包括:SpringBoot项目设置和Vue-cli前端配置。同源策略是保障网络请求安全的策略,要求协议、域名和端口一致。不遵循同源策略可能导致用户信息安全风险。
摘要由CSDN通过智能技术生成

解决CORS跨域问题

  • 今天做前后端分离的项目时, 前端向后台发送请求发现报错: Access to XMLHttpRequest at ‘http://localhost:8082/doLogin’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
  • 问题分析: 从报错信息可以知道是由于CORS(Cross-origin resource sharing)所致
  • 解决方案
    1. SpringBoot项目解决方案

      /**
       * 解决异步访问跨域
       */
      @Configuration
      public class CorsConfig implements WebMvcConfigurer {
          @Override
          public void addCorsMappings(CorsRegistry registry) {
              //本应用的所有方法都会去处理跨域请求
              registry.addMapping("/**")
                      //允许远端访问的域名
                      .allowedOrigins("http://localhost:8080")
                      //允许请求的方法("POST", "GET", "PUT", "OPTIONS", "DELETE")
                      .allowedMethods("*")
                      //允许请求头
                      .
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值