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.重新启动项目,发现解决了跨域问题
在这里插入图片描述

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • PAD图主要特点「建议收藏」

    PAD图主要特点「建议收藏」PAD图主要特点1.PAD图表示的程序结构的执行顺序是自最左边的竖线的上端开始,自上而下,自左向右。2.用PAD图表示的程序片段结构清晰,层次分明3.支持自顶向下、逐步求精的设计方法4.只能用于结构化的程序设计5.PAD图不仅可以表示程序逻辑,还能表示数据结构…

    2022年8月13日
  • java怎样调用oracle存储函数_oracle如何调用存储过程

    java怎样调用oracle存储函数_oracle如何调用存储过程之前给大家介绍了java代码调用存储过程,下面要给大家介绍的就是java当中调用oracle存储过程,一起来看看吧。首先来看一下项目结构:在数据库创建存储过程的脚本,假如,使用的是本地的oracle数据库,那么,就需要开启服务-OracleOraDb11g_home1TNSListener和OracleServiceORCL。实现:输入用户的工号,输出用户名字、薪水以及工作:createorr…

    2022年10月20日
  • 2、wxWidgets介绍–菜单栏、状态栏、图标简介

    2、wxWidgets介绍–菜单栏、状态栏、图标简介wxWidgetswxWidgets是一个用来编写C++程序的GUI(图形用户界面)工具包。它是一个开源的、成熟的、跨平台的工具包。wxWidgets应用程序能在所有主流的操作系统上运行,Windo

    2022年7月2日
  • webstorm激活码最新2021(最新序列号破解)

    webstorm激活码最新2021(最新序列号破解),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
  • idea控制台中文乱码怎么解决_idea控制台打印中文乱码

    idea控制台中文乱码怎么解决_idea控制台打印中文乱码IDEA 控制台中文乱码处理

    2022年4月20日
  • Anaconda 环境变量手动设置(详细)

    问题Win键+r打开运行对话框,输入cmd回车输入conda,显示:‘conda’不是内部或外部命令,也不是可运行的程序或批处理文件。主要原因是因为安装anaconda时,不是自动选择为添加到环境变量原因导致的。只要你知道这个怎么环境设置了,一般遇到类似的问题也就可以自己解决了。(比如python的安装)第一步打开控制面板,进入所有控制面板项,再进入系统,选择高级系统设置。第二步进入高级,点击环境变量。第三步在系统变量区域内选择Path,双击。第四步点击新建。第五步

    2022年4月4日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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