VUE axios使用方法与跨域问题解决
'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
前后端数据交互本地代理跨域问题,在本地localhost访问接口是要跨域的,浏览器的安全策略报错,需要在webpack配置proxyTable
config/index.js
module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://www.centby.com',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true,//如果需要跨域 pathRewrite: { '^/api': 'http://www.centby.com',//调用接口直接写‘/api/user/add’即可 } } }, // 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- /** * Source Maps */ // 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: '/', /** * Source Maps */ 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 } }
使用方法示例:/api/v1/article/list/ = http://www.centby.com/v1/article/list/
mounted(){ //接口域名和端口用 api 代替 this.articles() }, methods: { articles (){ let me = this; this.axios.post('/api/v1/article/list/', { token: '$13$iy6I3ab', page:1, pagesize:10, type:1 }).then(function (res) { console.log(res); if(res.data.status == 1){ console.log(res.data.data.data); //渲染页面 me.list = res.data.data.data; } }).catch(function (error) { console.log(error); }); } },
axios安装
npm install --save axios vue-axios
main.js
import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
用法
Vue.axios.get(api).then((response) => { console.log(response.data) }) this.axios.get(api).then((response) => { console.log(response.data) }) this.$http.get(api).then((response) => { console.log(response.data) })
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
java适配器模式
适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。 案例: 定义机器接口和其具体实现的两个不同机器 /** * @author Gjing * 刷卡器 **/ public interface CardMachine { /** * 刷身份证 */ void blushIdCard(String number); /** * 刷银行卡 */ void blushBankCard(String number); } /** * 身份证刷卡器 */ class IdCardMachine implements CardMachine{ @Override
- 下一篇
使用阿里云搭建 PHP 环境并且运行多个域名网站(支持 HTTPS)
概述本着节约为原则,一直在尝试使用最低成本运行各类应用,目前已经研究出来了一些最低成本运行 PHP 网站的方案,供广大阿里云用户参考。 所使用到的产品1、共享虚拟主机普惠版,配置:空间:200M 流量:10GB,续费价格:39元/年2、对象存储 OSS,0.148元/GB/月,远比虚拟空间的价格便宜 如何搭建环境第一步共享虚拟主机中上传 PHP 代码,并且每个网站创建一个文件夹,由于空间不支持多域名,所以这里使用 .htaccess 来实现多域名多站点(曲线救国?),如下图: .htaccess 如下 为了方便大家复制,这里提供文本代码: 第二步绑定各个站点的域名 如果要支持 https 则到 CDN 去绑定域名以及 DNS 解析 完成以上两步即可实现多站点并且低成本运行 PHP 网站了。 这里提一下,虚拟空间里面只存 PHP 代码,图片或者上传的文件都存在 OSS 中,成本低,并且访问速度比虚拟空间要快,因为没宽带限制。200M 的虚拟空间全部用来放 PHP 代码的话,可以运行很多个网站了,如果是开源的软件,则把 attachment 或者 resources 等放图片的目录拷贝到 ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Mario游戏-低调大师作品
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7