vue跨域解决方案反向代理_怎么解决跨域问题

vue跨域解决方案反向代理_怎么解决跨域问题文章目录前言一、跨域是什么?二、解决跨域的办法前言跨域错误信息AccesstoXMLHttpRequestat‘http://192.168.2.92:3000/api/b/home’fromorigin‘http://localhost:8080’hasbeenblockedbyCORSpolicy:Responsetopreflightrequestdoesn’tpassaccesscontrolcheck:ItdoesnothaveHTTP

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

前言

跨域错误信息

Access to XMLHttpRequest at ‘http://192.168.2.92:3000/api/b/home’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
在这里插入图片描述

一、跨域是什么?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
举例说明:

#协议跨域
http://a.baidu.com 访问 https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080 访问  http://a.baidu.com:80;
#域名跨域
http://a.baidu.com  访问  http://b.baidu.com;

二、解决跨域的办法

1.这里以使用vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件

module.exports = { 
   
    publicPath: './',
    lintOnSave: true,
    configureWebpack: { 
   
        //关闭 webpack 的性能提示
        performance: { 
   
            hints:false
        }
    
    },
    devServer: { 
   
        proxy: { 
   
            '/api': { 
   
                target: 'http://192.168.2.90:3000',//后端接口地址
                changeOrigin: true,//是否允许跨越
                pathRewrite: { 
   
                    '^/api': '/api'//重写,
                }
            }
        }
    }
}

此方法只能在开发环境中使用。
后端请求地址是http://192.168.92.2:3000,所有api的接口url都以/api开头。
所以首先需要匹配所有以/api开头的.然后修改target的地址为http://192.168.2.92:9090。
最后修改pathRewrite地址:将前缀’^api’转为’/api’。
如果本身的接口地址就有’/api’这种通用前缀,就可以把pathRewrite 删掉。

2.配置一下axios.defaults.baseURL = ‘/api’这样就可以保证动态的匹配生产和开发环境的定义前缀,代码如下:

// mock服务器
axios.defaults.baseURL ='/api';

3.重新启动项目,发现解决了跨域问题
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186965.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 解压版tomcat7安装教程

    解压版tomcat7安装教程转载地址 Tomcat涉及到的配置比较多,文件也多,根据我现在掌握的知识,简单的做了一下免安装版的tomcat的基本配置和安装方法。一、配置JDK要想在自己的计算机上安装Tomcat,需要JDK的支持,因为Tomcat是用java语言编写的一个很轻量级的Web服务器。JavaSE的最新版下载地址:点击这里1、安装…

  • Azure编程笔记(1):序列化复杂类型的TableEntity字段

    Azure编程笔记(1):序列化复杂类型的TableEntity字段

    2021年11月15日
  • 苹果手机录屏软件_4款手机录屏软件推荐,你觉得哪款更好用?

    苹果手机录屏软件_4款手机录屏软件推荐,你觉得哪款更好用?随着智能与科技的迅速发展,现在国内外基本上用户都用上了手机。据相关数据统计,在2016年的时候,全球的手机用户量已经超过了26亿人次。在2020年之后,全球手机的用户量预计将超过36亿。而如此大的用户群体下面,手机的作用也不仅限于通讯,更多的是追剧娱乐。所以,录屏的需求也就比较多了。那么,手机录屏软件哪个好呢?小编认为:简单、好用是关键!所以今天这期就给大家推荐一波录屏软件!↓↓一、简单类手机录屏…

  • WebService接口

    WebService接口这是我在做对外部系统推送数据时自己写的WebService推送接口工具类,有几点需要注意1、我们调用对方的WebService接口,对方会给一个WebService接口的地址,供我们访问:http:

  • linux下,查看redis版本号,一行命令搞定。[通俗易懂]

    linux下,查看redis版本号,一行命令搞定。[通俗易懂]进入redis部署目录,输入命令./redis-server–version,搞定。具体如下。[root@idoxuredis]#./redis-server–versionRedisserverv=3.2.0sha=00000000:0malloc=jemalloc-4.0.3bits=64build=74a42375bc62…

  • 股票模拟交易_JKI状态机

    股票模拟交易_JKI状态机给定一个长度为 N 的数组,数组中的第 i 个数字表示一个给定股票在第 i 天的价格。设计一个算法计算出最大利润。在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票):你不能同时参与多笔交易(你必须在再次购买前出售掉之前的股票)。卖出股票后,你无法在第二天买入股票 (即冷冻期为 1 天)。输入格式第一行包含整数 N,表示数组长度。第二行包含 N 个不超过 10000 的正整数,表示完整的数组。输出格式输出一个整数,表示最大利润。数据范围1≤N≤105输入样例:51

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号