Vue之axios请求的跨域proxy设置原理配置

最新推荐文章于 2024-07-18 21:07:46 发布
最新推荐文章于 2024-07-18 21:07:46 发布
阅读量784 收藏 1
点赞数
分类专栏： VUE 文章标签： vue axios 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42307283/article/details/109389317
版权
本文介绍了在Vue项目中如何通过vue.config.js配置解决跨域问题。前端配置了proxy代理，将'/ai'请求映射到指定的目标地址'http://10.10.1.15:8802'，并启用changeOrigin以实现本地开发环境的跨域请求。若后端已允许跨域，则可不需此设置。
摘要由CSDN通过智能技术生成

当不同源（ ip,端口,协议有任何 一个不一样 就是不同源）请求数据时会发生跨域问题所以就要配置跨域问题。

在vue.config.js文件下配置：
在这里插入图片描述

 proxy: {//跨域配置
      "/ai": {  //是自定义的本地请求时的名字
        target: "http://10.10.1.15:8802",//你请求的第三方接口
        ws: true,
        changeOrigin: true, //在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {//路径重写
          "^/ai": "/"  // '^/ai'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8080/ai' 转接为 http://10.10.1.17:8802/
        }
      }, 
      
  }

以上是前端的配置；如果后端也设置了允许跨域的请求就可以不需要设置

Jocelyn_书
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全局配置axios、axios 拦截器 和 proxy 跨域代理
酷爱前端的小陈博客
05-19 5840
1. 在 vue3 的项目中全局配置axios 2. 在 vue2 的项目中全局配置 axios 需要在main.js 入口文件中，通过Vue 构造函数的prototype 原型对象全局配置 axios： 3. 什么是拦截器 拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。 应用场景： ① Token 身份认证 ② Loading 效果 ③ etc… 4. 配置请求拦截器 通过 axios.intercepto...
axios的proxy代理配置解析
啊啊怪的学习日记
01-12 8337
proxy实际上是一种前端开发中方便开发用的东西，它在本地可以跨域访问其他的网站，但是当页面打包之后，proxy就会失效 我是在vue.config.js中设置proxy的，代码如下 proxy: { //匹配到的路径 "/api": { target: "XXXXXXXXX", //目标主机地址 changeOrigin: true,//是否启动代理 pathRewrite: { //重写路径 "^/api
proxy代理配置及解析
Wonder
10-14 6097
1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的，该文件是整个项目的主要配置入口 // node自带路径工具. var path = require('path') // 分为两种环境，dev和production module.exports = { dev: { // 配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。 proxyTable: { // 需要代理的接口，可以跨域
vue如何解决跨域？原理？
最新发布
weixin_56187723的博客
07-18 509
在Vue项目中解决跨域问题，通常不是在Vue框架本身直接解决，因为Vue主要关注于视图层的构建，而跨域问题属于前后端通信的范畴，更具体地说是浏览器的同源策略限制。不过，我们可以通过一些方法或工具在开发环境中模拟解决跨域问题，并在生产环境中通过后端配置来处理。
react axios配置代理（proxy)，解决本地开发时的跨域问题
好巧的博客
03-27 8426
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来。打开 config 文件夹下的 webpackDevServer.config.js 文件。会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?如果本篇文章对你有帮助的话，很高兴能够帮助上你。参照如下格式，配置代理。
vue3.0-axios拦截器、proxy跨域代理
qq_52822043的博客
04-27 7684
1. vue-cli 1）vue-cli vue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。 官方首页：Vue CLI 特点： 开箱即用 基于webpack 功能丰富且易于扩展 支持创建vue2和vue3的项目 2）安装vue-cli vue-cli是基于Node.js开发出来的工具，因此需要使用npm将它安装为全局可用的工具： ①解决Windows PowerShell不识别vue命令的问题 3）创建项目 4）基于vue ui创...
Vue cli里的proxy跨域配置（axios）
qq_45787731的博客
09-27 1047
(亲自试验ok) 首先是的创好项目：vue create test01 下载axios：npm install --save-dev axios vue 2里 1、来到src/main.js文件：（代码如下） import Vue from 'vue' import App from './App.vue' import axios from 'axios' //https://www.xxx.cn/get axios.defaults.baseURL = "http://localhost:8080"
在vue中使用axios跨域配置
自学前端开发
03-09 1337
在使用vue axios发送请求时产生跨域问题，报错如下: vueaxios Access to XMLHttpRequest at 'localhost:3000/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extens
vue2.0设置proxyTable使用axios进行跨域请求的方法
08-29
Vue 2.0 设置 ProxyTable 使用 Axios 进行跨域请求的方法 在 Vue 2.0 中，为了解决跨域请求的问题，我们可以使用 ProxyTable 来设置代理服务器，并使用 Axios 库来发送请求。在本文中，我们将详细介绍如何使用 ...
Vue axios 跨域请求无法带上cookie的解决
10-14
总之，解决Vue axios跨域请求无法携带cookie的问题，需要前端设置`axios.defaults.withCredentials = true`，后端设置`Access-Control-Allow-Credentials: true`，并且`Access-Control-Allow-Origin`要正确指向前端...
Vue 3.x+axios跨域方案的踩坑指南
10-16
在学习或使用Vue3.x和axios时，理解如何在开发环境中处理跨域请求是非常重要的。尽管这个问题很常见，但通过上述方法可以有效地解决开发阶段的跨域问题，从而提高开发效率。在开发过程中，应当谨慎测试这些配置，...
vue引入axios同源跨域问题
10-17
总结，解决Vue+axios的同源跨域问题，可以通过Vue CLI的代理配置在开发环境中轻松实现，而在生产环境中，需要依赖后端服务器的支持，通过CORS机制来允许跨域请求。理解并掌握这些技术，可以让你在开发过程中更顺利地...
axios请求与proxy代理配置
黑猫几绛的博客
08-11 8233
如果是不考虑跨域问题，那么请求后台数据使用的就是该路径。但是根据同源策略，3000端口（前端页面端口）无法访问5000端口（后台数据端口），此时就需要使用proxy代理配置了。 /** * 获取所有的用户信息 */ getUserData = () => { axios.get('http://localhost:5000/users').then( res => { console.log(res.data) ...
vue中axios进行封装，配置proxy访问后台接口
qq_48099312的博客
06-21 692
1.我这里使用是vue-cli脚手架,先搭建一个vue-cli脚手架,安装命令如下。5.配置vue.config.js中的proxy代理，用于访问后台。3.在main.js中引入并挂载axios。
axios使用及配置明细小记
一只倔强的蜗牛的博客
08-07 8521
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 1. Features 从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF 2. 安装 使用 npm: $ ...
Vue配置文件中的proxy配置
热门推荐
weixin_47437528的博客
04-14 1万+
1. vue的服务器代理配置参数详解 2. 代理多个接口的方法
解决 Axios 跨域问题，轻松实现接口调用
LiamHong_的博客
09-15 1万+
Axios 跨域常用的解决方法有 CORS、JSONP、代理等，开发环境可通过代理服务器实现跨域，CORS 需要服务端设置 Access-Control-Allow-Origin 响应头，JSONP 只支持 GET 请求。选择适合项目需求的解决方案能够很好地解决跨域问题，保障应用的正常运行。FastAPI 与 Flask：Python Web 两大流行框架综合对比Axios 怎么通过 FormData 对象上传文件？跨源资源共享（CORS） - HTTP | MDN。
react使用axios以及设置代理(http-proxy-middleware)
lanseguhui的博客
08-17 3491
前面已经搭建了基本页面，接下来就是react项目中与后台对接 1.安装axios npm install axios --save 2.在utils文件夹中创建request.js文件(配置axios封装请求方法) import axios from 'axios' import {getToken} from './auth' const instance = axios.create({ baseURL:'/api', timeout:50000 }) instance.d
axios反向代理proxy个人理解
weixin_44854986的博客
02-07 2381
使用反向代理proxy的原因 首先需要了解浏览器的同源策略，同源就是说比如你VUE的项目地址是“http://localhost:8080”,而你后端项目启动地址是‘http://localhost:9999’，两者中协议（http）、域名（localhost）相同，但是端口号（：xxxx）vue是8080，而后端是9999不相同，所以产生跨域，需要使用反向代理。（若两者满足协议、域名、端口号相同则不存在跨域问题）。 反向代理在我个人理解就是给你vue项目访问后端资源时给你套上的一个壳，让浏览器认为本次请求
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值