返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/145439.html(转载时请注明来源链接)

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

猜你喜欢
  • vue项目实现webpack配置代理,解决跨域问题
    目录webpack配置代理,解决跨域主要是这句话vue跨域问题,修改代理后仍404接口请求用法webpack配置代理,解决跨域 在config文件夹中的index.js文件配置 主要...
    99+
    2024-04-02
  • 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+
    2024-04-02
  • 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+
    2024-04-02
  • vue项目部署跨域问题怎么解决
    这篇文章主要介绍“vue项目部署跨域问题怎么解决”,在日常操作中,相信很多人在vue项目部署跨域问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目部署跨域问题怎么解决”的疑惑有所帮助!接下来...
    99+
    2023-06-30
  • Vue-Cli配置代理转发解决跨域问题的方法
    目录vue-cli中集成的跨域解决方案vue-cli解决跨域配置说明基地址重启项目,验证结果小结vue-cli中集成的跨域解决方案 思路: 在前端服务和后端接口服务之间 架设一个中...
    99+
    2024-04-02
  • webpack-dev-server如何设置反向代理解决跨域问题
    这篇文章主要为大家展示了“webpack-dev-server如何设置反向代理解决跨域问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“webpack-dev-...
    99+
    2024-04-02
  • Vite怎么配置代理Proxy解决跨域问题
    本篇内容主要讲解“Vite怎么配置代理Proxy解决跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vite怎么配置代理Proxy解决跨域问题”吧!前言我们在编写前端项目的时候,经常会遇到...
    99+
    2023-07-05
  • vue-loader和webpack项目配置及npm错误问题的解决
    目录vue-loader和webpack项目配置及npm错误解决vue-loader webpack版本出现的问题问题描述解决方法vue-loader和webpack项目配置及npm...
    99+
    2024-04-02
  • vue跨域处理方式(vue项目中baseUrl设置问题)
    目录vue跨域处理(baseUrl设置问题)一、方法一二、方法二三、方法三vue请求不同的域名,baseURL配置vue跨域处理(baseUrl设置问题) 一、方法一 在公用文件...
    99+
    2024-04-02
  • vue怎么解决代理和跨域问题
    这篇“vue怎么解决代理和跨域问题”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么解决代理和跨域问题”文章吧。一、安...
    99+
    2023-07-04
  • 前端vue打包项目,如何解决跨域问题
    目录vue打包项目解决跨域vue项目解决跨域(打包上线无需手动切换url)vue打包项目解决跨域 前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配...
    99+
    2024-04-02
  • vue跨域proxy代理配置详解
    目录引言例一例二总结引言 相信很多人都用过proxy,这里就不多说proxy的基本使用,这里要说一下很多人使用proxy的一个误区,大家一般都是直接将管官方的例子拿过来,修改一下代理...
    99+
    2024-04-02
  • Vue3设置Proxy代理解决跨域问题
    目录设置Proxy代理解决跨域ProxyVue3.0代理配置设置Proxy代理解决跨域 Proxy Vue3当中的跨域解决方案还是跟Vue2差不多用的都是proxy,而且Vue3的双...
    99+
    2024-04-02
  • vue项目部署跨域问题的详细解决过程
    目录首先是后端:再是前端:总结跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,主要记录项目中的各种设置,解决的过程。 首先是后端: 过...
    99+
    2024-04-02
  • vue中proxy代理的用法(解决跨域问题)
    目录声明1. 首先我们应该知道2. 跨域,什么是跨域呢?问题跨域的解决方案代理服务器是如何解决跨域的?proxy配置以vue cli3.0为例总结声明 1. 首先我们应该知道 前端a...
    99+
    2022-12-09
    vue proxy代理 proxy解决跨域 vue跨域问题
  • nginx 配置解决前端跨域问题
    一、为什么会出现跨域问题        出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策...
    99+
    2023-09-10
    前端 nginx 服务器
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作