vue使用axios解决跨域_vue前端解决跨域的方法

vue使用axios解决跨域_vue前端解决跨域的方法工具版本:【vue-V】:2.9.6ide工具:VSCode/Idea前提:我们前端vue工程需要单独部署一、本地使用命令运行跨域问题。外网访问的地址:https://www.runoob.com/try/ajax/json_demo.json本地springboot接口访问的地址:http://192.168.3.12:8081/register/getSmsCode/1234567891、axios访问的代码: created(){ const_this=this

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

工具版本:
【vue -V】:2.9.6
ide工具:VSCode / Idea

前提:我们前端vue工程需要单独部署

一、本地使用命令运行跨域问题。
外网访问的地址:https://www.runoob.com/try/ajax/json_demo.json
本地springboot接口访问的地址:http://192.168.3.12:8081/register/getSmsCode/123456789

1、axios访问的代码:

	created(){ 
   
		  const _this = this
		  this.$axios
		  .get('/try/ajax/json_demo.json')
		  .then(response => (
			console.log('请求成功'),
			console.log(response),
			_this.msg = response.data

			))
		  .catch(function (error) { 
    // 请求失败处理
			console.log(error);
		  });

		  //发送本地springboot请求,本机的地址:192.168.3.12
		  this.$axios
		  .get('/register/getSmsCode/123456789')
		  .then(resp => (
			console.log('请求本地接口OK'),
			console.log(resp),
			_this.springStr = resp.data

			))
		  .catch(function (error) { 
    // 请求失败处理
			console.log("请求本地接口失败");
		  });
	  }
		

截图如下:
在这里插入图片描述
备注:需要在main.js中全局注册

importaxios from 'axios'
Vue.prototype.$axios = axios    //全局注册,使用方法为:this.$axios

2、修改assetsPublicPath配置
配置 config—index.js中的build模块
将assetsPublicPath: ‘/’, 修改为 assetsPublicPath: ‘./’,
截图如下:
在这里插入图片描述
打包后的index.html路径为下面:

<script type=text/javascript src=./static/js/vendor.096d28cd4f5da166f9ce.js>

访问地址:http://localhost:8080/
点击button跳转页面后的地址:http://localhost:8080/#/test

备注:这个/test是从首页的button跳转过来的 【this.$router.push(’/test’)】

3、修改proxyTable配置

		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: { 
   
		  '/try': { 
   
			target:'https://www.runoob.com', // 你请求的第三方接口
			changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
		  },
		  '/register': { 
   
			target:'http://192.168.3.12:8081', // 本地的springboot接口
			changeOrigin:true, //
		  }

		},

截图如下:
在这里插入图片描述
4、测试运行:
我们通过【npm run dev】启动我们的服务,通过【http://localhost:8080】就可以访问。

我们本机可以访问,但是在其它的主机上访问拒绝(使用nginx部署不会有这个问题)
	设置config---index.js中的
		host: 'localhost', // can be overwritten by process.env.HOST
	为:
		host: '0.0.0.0', // can be overwritten by process.env.HOST

备注,使用proxyTable只能解决本地跨域问题。如果部署到nginx就不会

二、部署到nginx配置。(在window环境中)
nginx版本:nginx version: nginx/1.19.0
启动nginx
直接在cmd中运行 nginx,不报错就启动了。
【tasklist|findstr “nginx”】可以查看是否启动过
结束服务【taskkill /f /im nginx.exe】

打包【npm run build】,生成dist文件夹,将dist里面的文件复制到nginx目录中【.../nginx/html/vue/】

配置nginx.conf文件
server {
    listen       8888;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html;
        index  index.html index.htm;
    }

	location /try {			
		proxy_pass https://www.runoob.com;	//internet api
	}
	
	location /register {			
		proxy_pass http://192.168.3.12:8081; // local spring boot api
	}
	
访问地址:【http://localhost:8888/vue/#/】vue就是nginx里面创建的目录
点击button,可以正常axios请求(外网和本地的springboot接口)

本地的nginx配置如下图:
在这里插入图片描述
运行结果如下图:
在这里插入图片描述

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

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

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

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

(0)
blank

相关推荐

  • kafka基础教程_spark kafka

    kafka基础教程_spark kafka一、基本概念Kafka™用于构建实时数据流水线和流媒体应用,具有水平可扩展性,容错性,并在数千家公司得到了应用。流媒体平台(streamingplatform)有三个关键功能:1.发布和订阅记录流。在这方面,类似于消息队列或企业消息系统。2.以容错方式存储记录流。3.实时处理记录流。Kafka被用于两大类应用程序:1.构建可在系统或应用程序之间可靠获取数据的

    2022年10月16日
  • html的网页代码_html字体代码大全

    html的网页代码_html字体代码大全常用HTML代码解释 一、文字1.标题文字&lt;h#&gt;……….&lt;/h#&gt;#=1~6;h1为最大字,h6为最小字 2.字体变化&lt;font&gt;……….&lt;/font&gt;【1】字体大小&lt;fontsize=#&gt;……….&lt;/font&gt;#=1~7;数字愈大字也愈大【2】指定字型&lt;fontface=…

  • myeclipse最新版_Myeclipse

    myeclipse最新版_Myeclipse只支持单线程下载,单线程最高速度180K左右,好像下载地址加密了https://anonym-proxy.info/index.php?q=aHR0cDovL2Rvd25sb2FkczQubXllY2xpcHNlaWRlLmNvbS9kb3dubG9hZHMvcHJvZHVjdHMvZXdvcmtiZW5jaC9oZWxpb3MvaW5zdGFsbGVycy9teWVjbGlwc2UtYmx1ZS05LjAtb2ZmbGluZS1pbnN0YWxsZXItd2luZG93cy5leGU%3Dhttps://

  • 我的第一款app

    上周末,也就是儿童节期间,窝在宿舍里敲了两天的代码,终于算是弄好了这个小游戏,虽然很简陋,被评为”看起来只需要一百行代码吧”,但确实消耗了我不少精力,成功消灭最后一个bug的时候,那种心情是无法言语的,兴奋激动.真的很高兴.地址贴上来,感兴趣的下了玩玩吧. 沙皮龙工作室 欢迎志同道合的孩子加入.虽然现在只我一人.我的第一款app地址最近几天考试继踵而至,数据结构,英语六级,还有通信原理

  • MQTT(一)C#使用 MQTTnet 快速实现 MQTT 通信(文末有完整Demo下载)[通俗易懂]

    MQTT(一)C#使用 MQTTnet 快速实现 MQTT 通信(文末有完整Demo下载)[通俗易懂]目录MQTT(一)C#使用MQTTnet快速实现MQTT通信(文末有完整Demo下载)MQTT(二)在windows64位上安装Python环境MQTT(三)Python客户端+net客户端+net服务端简单通信MQTT(四)树莓派开机自动运行Python客户端MQTT(五)EMQ开源MQTT消息服务器1什么是MQTT?MQTT(MessageQue…

  • php字符串大小写转换函数

    php字符串大小写转换函数php字符串大小写转换函数

发表回复

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

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