vue项目打包后请求地址错误/打包后跨域操作

vue项目 npm run dev时跨域请求正常，但是打包后请求地址就错误（请求地址不存在），请求不到数据。

在vue项目中常用的是proxyTable代理跨域，这个用起来比较方便，但是当项目打包后就遇到这个问题了。

解决办法如下：

打开config文件夹下的index.js文件，添加以下代码

pathRewrite: {
 '^api':'https://*****.com' //填写需要跨域的地址
}

2.配置开发环境地址，就是config文件夹下的dev.env.js文件，添加以下代码：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST:'"/api"' //配置代理路径的符号
})

3.配置生产环境地址，就是config文件夹下的prod.env.js文件，添加以下代码：

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'"https://**********.com/api"' //生产环境的地址
}
})

如果接口地址没有api这个公共路径就不要添上了。

4. 接下来就该在组件中使用了。

 methods : {
  getData() {
  let _this = this;
  this.http(this,{
  //process.env.API_HOST 获取当前环境的api地址
   url : process.env.API_HOST+'/platform/index/new',
   // headersType : 1 //token
  }).then(res=>{
   this.ShowSkeleTon = true;
   this.list = res.list;
  },err=>{
   console.log(err);
  });
  },
 },

然后就是修改所有组件中的url地址了

虽然比较麻烦，但可以完美解决这个问题。这样即使打包后也可以请求到数据了。

补充知识：vue项目部署后跨域请求后端失败（已解决）

未解决前

验证码加载失败

解决后

验证码加载成功

解决办法

在 nginx/conf/nginx.conf 下做如下配置

server {
 listen 8080;  # 监听的端口号
 server_name 127.0.0.1; # 服务器的ip地址
 root /usr/local/nginx/html; # 服务器中项目所在文件夹
 #charset koi8-r;
 #access_log logs/host.access.log main;
 location / {
  # root /usr/local/nginx/html/;
  try_files $uri $uri/ /index.html;
  index index.html index.htm;
 }
 # 解决跨域请求
 location /req {
  rewrite ^.+req/?(.*)$ /$1 break;
  proxy_pass http://127.0.0.1; #第一个跨域请求的地址
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
 # 解决跨域请求
 location /api {
  proxy_pass http://127.0.0.1:/login; # 第二个跨域请求的地址
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection ‘upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
 }
 }

注意：以上提供了两种解决方法，但是当两个都使用第二中方法时会出现问题。

以上这篇vue项目打包后请求地址错误/打包后跨域操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目部署上线遇到的问题及解决方法

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

  • 详解vue或uni-app的跨域问题解决方案

    常见解决方案有两种 服务器端解决方案 服务器告诉浏览器:你允许我跨域 具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author

  • 详解VueJs前后端分离跨域问题

    使用vue-cli搭建的vue项目 可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题 设置配置项的目录在config下的index.js,主要通过配置proxyTable项,设置代理指向你的后台地址 dev: { env: require('./dev.env'), port: 8085, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ag

  • 记一次vue跨域的解决

    好久不见,今天想写的是前段时间碰到的一个小问题.其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据,说是跨域了. 其实跨域的问题,在如今前后端的时代非常常见,如果图方便的话,一般是在后端的请求以及拦截器中设置header,但是有一些业务需求单纯后端是解决不了的.还是需要前端自行来处理,这次碰到的就是前端需要自行处理的情况. 这里我不细说跨域的解决方案,只聊聊我是怎么解决的.如果大家想要知道更详细的跨域知识,可以点个在看!我下次写一个专题. vue跨域代理解决方案 其实需求比较简单,就是先

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

  • Vue项目利用axios请求接口下载excel

    本文实例为大家分享了Vue项目利用axios请求接口下载excel的具体代码,供大家参考,具体内容如下 据我了解的前端的下载方式有三种,第一种是通过a标签来进行下载,第二种时候通过window.location来下载,第三种是通过请求后台的接口来下载,今天就来记录一下这三种下载方式. 方法一:通过a标签 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/logo.jpg" rel="external nofollow&

  • 解决vue项目axios每次请求session不一致的问题

    1.vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' imp

  • Vue项目的网络请求代理到封装步骤详解

    目录 1.创建vue项目 2.安装axios 3.进行config.js配置 4.main.js里引入 5.src目录下新建Utils文件夹,在内封装request.js 6.以login路由为示例 src文件下新建api文件,在api内新建login.js 7.在页面内引入方法,并使用 1.创建vue项目 vue create demo demo是项目名称 2.安装axios 进入demo里面打开终端(黑窗口),执行 npm install axios 3.进行config.js配置 devS

  • 为vue项目自动设置请求状态的配置方法

    在进入一个页面的时候,一般在获取数据的同时,会先显示一个 loading ,等请求结束再隐藏 loading 渲染页面,只需要用一个属性去记录请求的状态,再根据这个状态去渲染页面就好了 async handler() { this.loading = true await fetch() this.loading = false } 虽然是很简单的功能,可是要处理的地方多的时候,还是很繁琐的,就想着能不能统一设置处理请求的 loading ,然后页面根据 loading 的状态决定要显示的内容,

  • vue项目实现减少app.js和vender.js的体积操作

    配置webpack中externals来减少打包后vendor.js的体积 在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本质上来解决这种问题. webpack的外部扩展(externals)可以有效的解决. externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法.相反,所创建的 bundle 依赖于那些存在于用户环境(c

  • vue项目实现设置根据路由高亮对应的菜单项操作

    高亮显示菜单是很常见的一个场景 首先,在router-link标签上绑定对应的路径 然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单 也可以在router路由数组里面设置meta信息,然后根据这个信息来判断是否高亮(这里可以循环生成菜单,不过我没有写)只是说一下思路 这样即可根据路由实现对应的菜单高亮了,我个人认为第二种比较灵活,如果菜单嵌套很多可以用第二种 补充知识:vuecli项目怎样使用jsx 有时候用jsx写页面可能更灵活,当然在vue中写

  • VUE前端从后台请求过来的数据进行转换数据结构操作

    我就废话不多说了,大家还是直接看代码吧` let label(){ let _this = this; let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSize let params ={ offset:_offset,//分页偏移量 limit:_limit,//分页查询数量 } labelView(",params).then(res=>{ _this.list = res.data.dat

  • vue.js使用代理和使用Nginx来解决跨域的问题

    vue.js使用代理和使用Nginx来解决跨域的问题

    使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包

随机推荐