Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求
思路
配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写
Vue里定义一个全部变量:site
Vue.prototype.site = '/api/';
此后发送的ajax请求都使用此变量来组合(为了方便管理,当需要更改时直接更改次变量)
设置webpack的代理和重写
在 config/index.js里修改dev选项
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:'http://xxxx.com/api',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
主要看proxyTable选项:
/api 是要代理的目录,target 是目标URL,即后台接口的真正位置
changeOrigin 为是否修改源,当时用ajax且跨域测试时需为true
pathRewrite 为路由重定向
工作流程:
当检测到有URL请求且是/api 路径时就修改请求URL,把请求URL中的/api 替换为target里的值,同时改变源让浏览器认为不是跨域请求
example: 我发送一个ajax请求,路径为 /api/test.php ,那修改后真实请求的url就是 http://xxxx.com/api/test.php
注意 因为部署到服务器上时不再使用webpack,所以你需要修改ajax请求的url,当你使用之前说的全局变量时只需要修改下全局变量就好
,更好的实践是根据部署代码的位置和后台api的未知来设置需要代理的路径
假如部署的前端代码index.html在根目录下,后台api在/test/下,那么把代理路径设置为/test更胜一筹
Vue ajax跨域请求的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
- JQuery的Ajax跨域请求原理概述及实例
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...
- Nginx 实现AJAX跨域请求
在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- php中ajax跨域请求---小记
php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...
随机推荐
- .Net Core下基于NPOI对Excel、Word操作封装
本库进行了重写,如果需要请转移到下文查看: https://www.cnblogs.com/holdengong/p/10889780.html 框架与依赖 框架:.NET Standard 2.0 ...
- 提取pfx证书公钥和私钥
从pfx提取密钥信息,并转换为key格式(pfx使用pkcs12模式补足) 1.提取密钥对(如果pfx证书已加密,会提示输入密码.) openssl pkcs12 -in 1.pfx -nocerts ...
- js setTime()详解
来源:http://www.jb51.net/article/35535.htm#t1 setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重 ...
- Django之高级视图与URL
Urls.py中有我们所有的路由映射关系.但是随着网站功能的增多,需要配置的URL也变得多了起来.并且维护这些导入也变得很麻烦.因此介绍一些优化和简洁的方法: 一 使用多个视图前缀: 之前所有的路由关 ...
- JAVA环境的JAVA_HOME, PATH 和CLASS_PATH设置
Windows下JAVA用到的环境变量主要有3个,JAVA_HOME.CLASSPATH.PATH.下面逐个分析. 简单来讲, 1.path是os用 classpath java用 JAVA_HOME ...
- 51nod1455(dp)
题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1455 题意: 中文题诶~ 思路: dp 1 <= n, ...
- SQLAlchemy外键的使用
orm可以将数据库存储的数据封装成对象,同时,如果封装的好的话,所有的数据库操作都可以封装到对象中.这样的代码在组织结构上会非常的清晰,并且相对与使用sql语句在sql注入方面会极具降低. SQLAl ...
- Qt 学习之路 2(21):事件过滤器
Qt 学习之路 2(21):事件过滤器 豆子 2012年10月15日 Qt 学习之路 2 37条评论 有时候,对象需要查看.甚至要拦截发送到另外对象的事件.例如,对话框可能想要拦截按键事件,不让别的组 ...
- C语言概述之介绍各种基本概念
第2章 C语言概述 2.1 C语言示例解释 #include #include<stdio.h> 这一条指令的作用相当于把stdio.h文件的所有内容都输入该行所在的位置. #includ ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_.Net Framework 部署目标
1.解决Windows性能不稳定: 2.降低Windows程序安装的复杂性: 3.解决Windows程序不安全性: 4.解决应用程序状态在硬盘上分散: 5.允许用户灵活地控制哪些东西能够安装,哪些东西 ...