关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题
axios现在以及是尤大大推荐使用的了,官方不在维护vue-reresource.
由于是地第一次使用axios, 在使用过程中猜了很大的坑
首先我们使用vue-cli创建的项目, 访问接口肯定是跨域了, 因为我们的本地服务默认的地址一般是localhost:8080 我们的服务器端肯定不是这个, 所以就形成跨域访问, axios不支持jsonp, 所以我们就要使用http-proxy-middleware中间件做代理,
http-proxy-middleware的github
安装
npm i axios --save-dev
npm install --save-dev http-proxy-middleware
// vue-cli 已经把http-proxy-middleware写在项目依赖里面了
引入axios
在项目的src/main.js
引入axios
import axios from 'axios'
Vue.prototype.$axios = axios;
// axios 不支持Vue.use(axios)
配置http-proxy-middleware本地代理
打开config/index.js
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false,
// 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
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
修改这里修改这里修改这里
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
这里是默认的配置, 找到线面的dev对象里面的proxyTable修改
proxyTable: {
'/api': {
target:'http://www.baidu.com/api',
changeOrigin:true,
pathRewrite:{
'^/api': ''
}
}
}
target
的参数就是你要访问的服务器地址, 你在代码里面写/api
就等于写了这个地址 , 比如我要访问http://www.baidu.com/api/login
这个接口在代码里面只需写/api/login
就可以了
至于build/dev.server.js
已经无需修改了, 里面已经有封装好了方法了
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
网上好多的解决方案都是在build/dev.server.js
里面自己在加内容, 完全不用了
做完上述操作之后一定要重启服务ctrl+c
然后npm run dev
做完上述操作之后一定要重启服务ctrl+c
然后npm run dev
做完上述操作之后一定要重启服务ctrl+c
然后npm run dev
然后我们就可以用axios访问接口了
this.$axios({
method: "POST",
withCredentials: false,
url: "/api/login",
data: {
name: "1511328705UZVQ",
psd: "123456"
}
})
.then(function(res) {
console.log(res);
})
.catch(function(err) {
console.log(err);
});
关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题的更多相关文章
- 使用axios以及http-proxy-middleware代理处理跨域的问题
axios现在以及是尤大大推荐使用的了,官方不在维护vue-reresource. 由于是地第一次使用axios, 在使用过程中猜了很大的坑 首先我们使用vue-cli创建的项目, 访问接口肯定是跨域 ...
- [vue] [axios] 设置代理实现跨域时的纠错
# 第一次做前端工程 # 记一个今天犯傻调查的问题 -------------------------------------------------------------------------- ...
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
- react添加多个域名proxy代理,跨域
在package.json中加入如下: { "name": "demo", "version": "0.1.0", &q ...
- Angular:使用前端proxy代理解决跨域问题
①在项目文件的根目录下新建文件proxy.config.json { "/": { "target": "http://127.0.0.1:3000& ...
- vue 解决axios请求出现前端跨域问题
vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- vue axios springBoot 跨域session丢失
前端: 在引入axios的地方配置 axios.defaults.withCredentials=true,就可以允许跨域携带cookie信息了,这样每次发送ajax请求后,只要不关闭浏览器,得到的s ...
随机推荐
- 移动端调试 — chrome模拟器基础调试
打开开发者工具,进入chrome调试状态,点击左上角的手机图标,进入手机模拟器调试状态. 模拟器支持操作: 切换设备类型,模拟网络环境,模拟bar,keyboard弹出状态,横屏状态,更改UserAg ...
- react 中事件参数和一般参数以及this绑定的写法
import React from 'react'; import PropTypes from 'prop-types'; class Home extends React.Component{ r ...
- C#静态变量总结
1.初始化 全局static变量的初始化在编译的时候进行,并且只初始化一次 . 函数static变量在函数中有效,第一次进入函数初始化.以后进入函数将沿用上一次的值. 2.生命期 全局static变 ...
- mysql的相关命令行操作命令
一:有关mysql的命令 转载来源:https://www.cnblogs.com/opsprobe/p/9126864.html 1 查看有没有安装mysql dpkg -l | grep mysq ...
- [Codeforces 364D]Ghd(随机算法+gcd)
[Codeforces 364D]Ghd(随机算法) 题面 给出n个正整数,在其中选出n/2(向上取整)个数,要求这些数的最大公约数最大,求最大公约数的最大值 分析 每个数被选到的概率\(\geq \ ...
- [暑假集训Day1T1]黑暗城堡
因为D[i]表示i号节点到1号节点的最短路径,所以可以先以1为源点跑一边SPFA,预处理出每个点到1号节点的最短路.之后开始考虑所谓的“最短路径生成树”,在这棵生成树中有以下性质:当fa[i]==no ...
- centos7中mysql不能输入中文问题的解决
首先在数据库里面输入 mysql> show variables like'%char%' -> ; +--------------------------------------+--- ...
- C# json格式的序列化与反序列化
使用C#,来序列化对象成为Json格式的数据,以及如何反序列化Json数据到对象 Json[javascript对象表示方法],它是一个轻量级的数据交换格式,我们可以很简单的来读取和写它,并且它很容易 ...
- 6层PCB设计技巧和步骤
6层PCB设计技巧和步骤 一.原理图的编辑 6层板由于PCB板中可以有两层地,所以可以将模拟地和数字地分开.对于统一地还是分开地,涉及到电磁干扰中信号的最小回流路径问题,绘制完原理图,别忘检查错误和 ...
- linux内核启动过程
作者:严哲璟 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 通过qemu以 ...