vue项目运行访问服务接口跨域问题

柔情只为你懂 2023-01-03 12:56 72阅读 0赞

控制台报错 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is

意思是 cors阻止了你请求的资源（跨域问题）；

解决方法:  
spring项目中加入配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70]  
详细代码：

package com.ruoyi.framework.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class WebMvcConfig implements WebMvcConfigurer { 
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
    //addMapping哪些接口允许跨域allowedorigins允许访问域
            registry.addMapping("/**").allowedOrigins("http://192.168.0.153:3000")
    //允许通过的请求头
                    .allowedHeaders("*")//允许的方法
                    .allowedMethods("*").maxAge(30 * 1000);
    //设置有效期探测请求时间ms 在这个时间段不用继续发送
        }
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70]: /images/20221119/72a491637d5d4612b8fa15088336639d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，72人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue解决接口跨域

Vue解决接口跨域一、vue.config.js配置文件二、全局路径 -------------------- 一、vue.config.js配置文

╰半夏微凉°/ 2024年04月06日 15:26/ 0 赞/ 82 阅读

相关 vue项目如何解决跨域问题

[跨域是什么][Link 1] 跨域本质是浏览器基于同源策略的一种安全手段同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

淡淡的烟草味﹌/ 2024年03月27日 14:08/ 0 赞/ 83 阅读

相关 vue项目运行访问服务接口跨域问题

控制台报错 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is 意思是 c

柔情只为你懂/ 2023年01月03日 12:56/ 0 赞/ 73 阅读

相关解决本地浏览器运行项目是的跨域问题，cesium 运行demo跨域问题

解决本地浏览器运行项目是的跨域问题（Access to XMLHttpRequest at 'XXX' from origin 'http://localhost:XX' h

约定不等于承诺〃/ 2022年12月22日 09:46/ 0 赞/ 306 阅读

相关 iframe跨域访问问题

最近给一个系统进行系统集成，配置了一个单点，把两个系统集成起来，以A系统为主系统，然后把B系统的菜单加到A系统中，这样就像是一个系统一样，访问起来也简单。但出了一个问题，就是i

向右看齐/ 2022年08月26日 15:26/ 0 赞/ 364 阅读

相关 vue跨域问题

开发环境解决跨域问题简单粗暴 ![70][] 文件在这里 config文件夹下index.js，记得改完之后重新run一下 (npm run dev) ![7

谁借莪１个温暖的怀抱￠/ 2022年05月31日 07:29/ 0 赞/ 252 阅读

相关 vue前端访问后台微服务跨域问题

1、部署现状前端VUE部署在Nginx服务中后台微服务通过NodeJS网关反向代理 2、问题现状 Request header field Aut

绝地灬酷狼/ 2022年05月15日 00:34/ 0 赞/ 478 阅读

相关 laravel接口访问跨域解决

原文：https://blog.csdn.net/cominglately/article/details/80381567 场景 . laravel作为后端API使用的

悠悠/ 2022年04月10日 07:39/ 0 赞/ 690 阅读

相关 VUE项目之跨域问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小咪咪/ 2021年09月17日 08:28/ 0 赞/ 379 阅读

相关 vue 的跨域访问

一：前言最近在做一个项目的时候需要去请求资源，因此使用axios来get请求，但一直报跨域错误。 `Access to XMLHttpRequest at 'http

分手后的思念是犯贱/ 2021年09月03日 05:23/ 0 赞/ 507 阅读