广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目实现webpack配置代理,解决跨域问题
  • 764
分享到

vue项目实现webpack配置代理,解决跨域问题

2024-04-02 19:04:59 764人浏览 独家记忆
摘要

目录webpack配置代理,解决跨域主要是这句话Vue跨域问题,修改代理后仍404接口请求用法WEBpack配置代理,解决跨域 在config文件夹中的index.js文件配置 主要

WEBpack配置代理,解决跨域

在config文件夹中的index.js文件配置

主要是这句话

proxyTable: { //本地测试接口
      '/': {
         target: 'Http://xx.xx.xx.xx',
         changeOrigin: true,
         secure: false
     }
 },

​示例代码:


module.exports = {
  dev: {
 
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { //本地测试接口
      '/': {
         target: 'http://xx.xx.xx.xx',
         changeOrigin: true,
         secure: false
       }
     },
 
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 
 
    
 
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',
 
    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true, 
    CSSSourceMap: true
  },
 
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
 
    
 
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
 
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
 
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}
 
​

vue跨域问题,修改代理后仍404

首先确认安装了axiOS,安装方法:cnpm install axios -S或者不用镜像npm install axios

在这里插入图片描述

dev: {undefined

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api': {
    target: 'http://40.73.37.92:8090/',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''//这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可
    }
  }
},

接口请求用法

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue项目实现webpack配置代理,解决跨域问题

本文链接: https://www.lsjlt.com/news/145439.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue项目实现webpack配置代理,解决跨域问题
    目录webpack配置代理,解决跨域主要是这句话vue跨域问题,修改代理后仍404接口请求用法webpack配置代理,解决跨域 在config文件夹中的index.js文件配置 主要...
    99+
    2022-11-13
  • vue项目配置代理如何解决跨域问题
    目录Vue项目配置代理1. 这里以axios发请求为例2. 如果发送的请求都以 /abc 开头3. 代理多个接口什么是跨域?配置(vue.config.js)总结Vue项目配置代理 ...
    99+
    2023-01-28
    vue项目配置代理 vue跨域 vue配置代理
  • vue项目怎么实现webpack配置代理
    本文小编为大家详细介绍“vue项目怎么实现webpack配置代理”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue项目怎么实现webpack配置代理”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。webpack...
    99+
    2023-06-29
  • 解决vue项目中前后端交互的跨域问题、nginx代理配置方式
    目录vue前后端交互的跨域问题、nginx代理配置1.安装axios2.解决跨域问题前后端分离项目的跨域问题及解决跨域简述解决办法vue前后端交互的跨域问题、nginx代理配置 最近...
    99+
    2022-11-13
  • Vue项目中怎么解决跨域问题
    本篇内容主要讲解“Vue项目中怎么解决跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue项目中怎么解决跨域问题”吧!跨域跨域报错是前端开发中非常经典的一个错误,报错如下 Ac...
    99+
    2023-07-02
  • Nginx配置反向代理解决跨域问题
    通过Nginx配置反向代理结果跨域问题 第一步:下载Nginx 一、下载 官网下载地址:http://nginx.org/en/download.html 我下载的版本:http://nginx.or...
    99+
    2023-09-06
    nginx 服务器 运维
  • Vue项目中该如何解决跨域问题
    目录跨域同源策略express服务器vue处理跨域express处理跨域总结跨域 跨域报错是前端开发中非常经典的一个错误,报错如下  Access to XMLHttpRe...
    99+
    2022-11-13
  • vue项目部署跨域问题怎么解决
    这篇文章主要介绍“vue项目部署跨域问题怎么解决”,在日常操作中,相信很多人在vue项目部署跨域问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目部署跨域问题怎么解决”的疑惑有所帮助!接下来...
    99+
    2023-06-30
  • webpack-dev-server如何设置反向代理解决跨域问题
    这篇文章主要为大家展示了“webpack-dev-server如何设置反向代理解决跨域问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“webpack-dev-...
    99+
    2022-10-19
  • Vue-Cli配置代理转发解决跨域问题的方法
    目录vue-cli中集成的跨域解决方案vue-cli解决跨域配置说明基地址重启项目,验证结果小结vue-cli中集成的跨域解决方案 思路: 在前端服务和后端接口服务之间 架设一个中...
    99+
    2022-11-13
  • vue-loader和webpack项目配置及npm错误问题的解决
    目录vue-loader和webpack项目配置及npm错误解决vue-loader webpack版本出现的问题问题描述解决方法vue-loader和webpack项目配置及npm...
    99+
    2022-11-13
  • Vite怎么配置代理Proxy解决跨域问题
    本篇内容主要讲解“Vite怎么配置代理Proxy解决跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vite怎么配置代理Proxy解决跨域问题”吧!前言我们在编写前端项目的时候,经常会遇到...
    99+
    2023-07-05
  • vue跨域处理方式(vue项目中baseUrl设置问题)
    目录vue跨域处理(baseUrl设置问题)一、方法一二、方法二三、方法三vue请求不同的域名,baseURL配置vue跨域处理(baseUrl设置问题) 一、方法一 在公用文件...
    99+
    2022-11-13
  • 前端vue打包项目,如何解决跨域问题
    目录vue打包项目解决跨域vue项目解决跨域(打包上线无需手动切换url)vue打包项目解决跨域 前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配...
    99+
    2022-11-13
  • vue怎么解决代理和跨域问题
    这篇“vue怎么解决代理和跨域问题”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么解决代理和跨域问题”文章吧。一、安...
    99+
    2023-07-04
  • Vue3设置Proxy代理解决跨域问题
    目录设置Proxy代理解决跨域ProxyVue3.0代理配置设置Proxy代理解决跨域 Proxy Vue3当中的跨域解决方案还是跟Vue2差不多用的都是proxy,而且Vue3的双...
    99+
    2022-11-13
  • vue项目部署跨域问题的详细解决过程
    目录首先是后端:再是前端:总结跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,主要记录项目中的各种设置,解决的过程。 首先是后端: 过...
    99+
    2022-11-13
  • Nginx部署vue项目和配置代理的问题解析
    1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 #...
    99+
    2022-11-12
  • vue中proxy代理的用法(解决跨域问题)
    目录声明1. 首先我们应该知道2. 跨域,什么是跨域呢?问题跨域的解决方案代理服务器是如何解决跨域的?proxy配置以vue cli3.0为例总结声明 1. 首先我们应该知道 前端a...
    99+
    2022-12-09
    vue proxy代理 proxy解决跨域 vue跨域问题
  • vue使用反向代理解决跨域问题方案
    目录为什么要解决跨域问题在单文件组件中如何去解决跨域问题后端数据接口:猫眼验证中心配置反向代理配置模板文件及字段解释整个配置反向代理的思路解决接口重复问题为什么要解决跨域问题 因为...
    99+
    2023-01-10
    vue反向代理解决跨域问题 vue 跨域
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作