我们使用脚手架创建的项目,可以在config项目中看到
其中我们打开index.js文件
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://192.168.0.173:8080',changeOrigin:true,//允许跨域pathRewrite: {'^/api': '/api'}}},// Various Dev Server settingshost: '0.0.0.0', // 代理会映射到本地的一个ip地址。这里我们可以通过改成根基的ip地址或者0.0.0.0然后通过手机就可以看到项目port: 8080, // 这里是我们本地设置的一个端口号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/#developmentdevtool: '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#cachebustingcacheBusting: true,cssSourceMap: true},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#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-pluginproductionGzip: 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}
}

其中proxyTable就是创建项目所自带的代理,当我们运行dev的时候,就会通过访问代理来间接访问我们的api。只需要添加属性changeOrigin:true 就可以实现跨域访问。同时可以提高安全系数。也省去了我们自定义请求文件时,所添加的主域!

转载于:https://www.cnblogs.com/bgwhite/p/9805502.html

Vue之通过代理设置跨域访问相关推荐

  1. 从实例入手学习使用vue+axios配置代理进行跨域访问百度音乐API

    场景 如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因就是因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的 ...

  2. 阿里云OSS设置跨域访问

    阿里云OSS设置跨域访问 简介 操作步骤 简介 OSS 提供 HTML5 协议中的跨域资源共享 CORS 设置,帮助您实现跨域访问.当 OSS 收到一个跨域请求(或者 OPTIONS 请求)时,会读取 ...

  3. Chrome浏览器设置跨域访问【新旧版本两种方式设置】

    一般我们在进行前后分离的项目 webapp 开发,或者 H5 移动 App 开发时,我们会使用 PC 端浏览器进行开发调试.但默认情况下 Ajax 请求无法跨域访问,请求时会报如下错误: XMLHtt ...

  4. jq跨域代理_jQuery 跨域访问问题解决方法

    jQuery 跨域访问问题解决方法 更新时间:2009年12月02日 01:25:19   作者: 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时 ...

  5. vue cli配置代理解决跨域问题

    内容 跨域问题 解决跨域问题 vue cli配置代理 跨域问题 是由于违背了同源策略,同源策略规定了协议名.主机名.端口号必须一致 我们目前所处的位置是http localhost 8080,我们想向 ...

  6. axios get怎么还会显示跨域_在Vue中如何使用axios跨域访问数据

    最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axi ...

  7. axios 跨域传参_在Vue中如何使用axios跨域访问数据

    vue.js学习之 跨域请求***与axios传参 一:跨域请求*** 1:打开config/index.jsmodule.exports{ dev: { } } 在这里面找到proxyTable{} ...

  8. laravel php跨域请求,Laravel 5.x设置跨域访问

    做api接口的时候碰到个问题,跨域! 解决方法有很多,但是方便的依旧那么一两个,这里我就介绍我最会的就是以下这种 最方便的,新建一个middleWare,把这个middleware加入到全局中间件,所 ...

  9. vue如何通过Nginx代理做到跨域访问API接口 解决404报错

    最近和vue对接接口发现总是访问不到 404 发现原因是 vue 使用代理 访问接口的时候前面加了一层 例如 访问 api/index/index 实际是 api/api/index/index 找到 ...

最新文章

  1. FFT ---- 2021牛客多校第一场 H Hash Function
  2. winsock select模型实现
  3. NLPIR-KGB知识图谱引擎突破传统数据挖掘束缚
  4. MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)的真正原因...
  5. LeetCode 202. 快乐数(快慢指针)
  6. Android 系统(65)---Android修改分区格式为F2FS
  7. NOI 2018 归程 (Kruskal重构树)
  8. 释放低代码小宇宙,微软 Power Platform 震撼来袭!
  9. 例题6-4 Broken Keyboard UVa11988
  10. 中英文对照 —— 饮食与美食
  11. C# 设计模式巩固笔记 - 建造者模式
  12. serialization 序列化
  13. 【Android】图形图像处理
  14. 【Android】【打开方式】Android11用其它应用打开微信文件
  15. 苹果设计可变色Apple Watch表带,智能穿戴玩法多
  16. ERP和MES破冰之路 [普实MES升级中国“智”造]
  17. C++:有限差分法求解随时间变化 平流方程 ut = - c * ux 在一个空间维度上,与 恒定速度,使用Lax方法作为时间导数(附完整源码)
  18. border-radius的使用
  19. 护眼灯哪些牌子好?央视推荐的护眼台灯
  20. LTE小区搜索-物理小区ID和同步信号PSS、SSS

热门文章

  1. http协议 php,PHP中的http协议
  2. 判断端口是否能用_【图文】 Windows自带入侵检测工具—Netstat命令查询 是否中木马...
  3. Oracle SQL Developer 添加SQLServer 和Sybase 连接 .
  4. Unable to update index for central http://repo1.maven.org/maven2/
  5. 如何最大限度提升虚拟内存性能(组图)
  6. python unittest库的入门学习
  7. Spring Data JPA中文文档[1.4.3] PDF
  8. 软件工程-东北师大站-第九次作业(PSP)
  9. 易助工资总额管控上市说明
  10. [转]java二维码生成与解析代码实现