解决vue+webpack项目接口跨域出现的问题

1、config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost)

proxyTable: {
 '/api': {
  target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境
  // target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口
  changeOrigin: true,
  pathRewrite: {
   '^/api': '/'
  }
 }
},
host: '自己的IP或者默认的localhost', // can be overwritten by process.env.HOST

在使用axios请求的时候把所有接口的'http://10.xx.xx.xx:8080/renter-server'部分替换为'/api'

例如我们项目里axios的配置文件夹（自定义的）api下面的index.js文件里有如下配置

let env = process.env.NODE_ENV
let BASE_1, BASE_2
if (env === 'production') {// 生产环境 正式打包使用
 BASE_1 = BASE_2 = CONFIG.apiHost
} else if (env === 'development') {// 开发环境 本地测试使用
 BASE_1 = BASE_2 = '/api'
}

再用BASE1拼接进行请求

axios.get(BASE_1 + '/pc/getHouseList', {params: params})

补充知识：vue打包后404，webpack配置问题

首先声明这是基于vue2.x的

1.

将其中build的配置项assetsPublicPath进行修改，改为上图--》目的是将资源文件的引入路径，改为相对地址（相对index.html）

2.html中的js、css、img引入均没有问题，

但是css中的background-image还是报404

此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径

此时的修改方法是，修改build文件夹中的utils.js文件，增加一行代码搞定

以上这篇解决vue+webpack项目接口跨域出现的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • Vue项目前后端联调(使用proxyTable实现跨域方式)

    vue本地项目调试线上接口出现跨域问题 使用方法:vue在配置文件中提供了proxyTable来设置跨域,在config文件夹的index.js文件中 dev: { //开发环境下 // 静态资源文件夹 assetsSubDirectory: 'static', // 发布路径 assetsPublicPath: '/', // 代理配置表,在这里可以配置特定的请求代理到对应的API接口 // 例如将'localhost:8080/api/xxx'代理到'http://xxxxxxx.com/x

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • 解决vue+webpack项目接口跨域出现的问题

    1.config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost) proxyTable: { '/api': { target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境 // target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口 changeOrigin: true, pathRewrite:

  • 解决vue cli3使用axios跨域问题

    解决vue cli3使用axios跨域问题

    目录 一.什么是跨域 1.跨域 2.同源策略 3.跨域问题怎么出现的 二.使用 axios 演示并解决跨域问题(vue-cli3.0) 1.项目创建.与 axios 的使用 2.跨域问题重现 3.解决跨域问题 一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都会产生跨域,在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 3.跨域问题怎么出

  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题.本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫:那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!! 这里就说ch

  • 解决Vue调用springboot接口403跨域问题

    最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意:"@CrossOrigin"注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型

  • vue项目部署跨域问题的详细解决过程

    vue项目部署跨域问题的详细解决过程

    目录 首先是后端: 再是前端: 总结 跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,主要记录项目中的各种设置,解决的过程. 首先是后端: 过滤器: @Configuration public class GlobalCorsConfig { /** * 允许跨域调用的过滤器 */ @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfigurat

  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了 直接上解决办法 首先在config目录下配置index.js文件如下 然后在webpack.dev.conf中配置如下 当然

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue 音乐App QQ音乐搜索列表最新接口跨域设置方法

    在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./web

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题

    vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据. 代码如下 if(config.url.indexOf('?')>-1){ config.url = url + config.u

随机推荐