关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题
来源:互联网 发布:淘宝贷款官网 编辑:程序博客网 时间:2024/05/22 21:11
axios现在以及是尤大大推荐使用的了,官方不在维护vue-reresource.
由于是地第一次使用axios, 在使用过程中猜了很大的坑
首先我们使用vue-cli创建的项目, 访问接口肯定是跨域了, 因为我们的本地服务默认的地址一般是localhost:8080 我们的服务器端肯定不是这个, 所以就形成跨域访问, axios不支持jsonp, 所以我们就要使用http-proxy-middleware中间件做代理,
http-proxy-middleware的github
安装
npm i axios --save-devnpm 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 requestsObject.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); });
阅读全文
0 0
- 关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题
- 使用http-proxy-middleware解决前端开发中跨域的问题
- vue.js使用http-proxy-middleware解决跨域请求问题
- vue2 axios的使用
- node+express+http-proxy-middleware代理转发
- vue2中使用axios http请求出现的问题解决
- gulp-connect-proxy和http-proxy-middleware代理
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- http-proxy-middleware
- npm模块之http-proxy-middleware使用教程(译)
- npm模块之http-proxy-middleware使用教程(译)
- npm模块之http-proxy-middleware使用教程(译)
- Vue2的axios
- axios使用拦截器统一处理所有的http请求
- axios的跨域问题
- Python使用HTTP代理 Proxy
- nodejs之http-proxy-middleware应用
- 人工智能如何更好的辅助医生?Petuum研究自动生成医疗图像报告
- 转载:译文 | 批量归一化:通过减少内部协变量转移加速深度网络训练
- Bailian2676 整数的个数【入门】(POJ NOI0105-11)
- EasyDemo*android studio图片资源的存放位置?
- 009 二维随机变量分布 min max 习题
- 关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题
- 回溯法的一个典型应用,在1~x中选出n个数的排列方式,且相邻两个数不一样·
- Python学习日记 第一天
- “为什么我的Clion编译要这么久?”
- 【05-Redis 数据类型(下)】
- [深度学习框架] 在Mac上安装Tensorflow
- 20171129二维数组指针访问
- Xcode9学习笔记75
- 选择排序和插入排序