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跨域请求的更多相关文章

  1. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  2. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  3. 解决ajax跨域请求 (总结)

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  4. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  5. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

  6. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  7. Nginx 实现AJAX跨域请求

    在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...

  8. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  9. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

随机推荐

  1. Docker 三架马车

    1. Docker Compose 我们前面的课程讲到过两个容器之间通过名字进行互联互通的话可以通过link参数来关联,这种做法比较麻烦,更好的方式是使用Docker Compose来定义一个 YAM ...

  2. Django之表单form

    在登录系统以及需要上传填入的信息时候,用的最多就是表单系统,例如像下面的这种格式 <form action="/form1/" method="post" ...

  3. linux文件系统相关概念

    struct task_struct { ......................... struct mm_struct*mm;//内存描述符的指针 struct files_struct *f ...

  4. C++基础学习5:强制类型转换

    在C++语言中新增了四个关键字static_cast.const_cast.reinterpret_cast和dynamic_cast.这四个关键字都是用于强制类型转换的.我们逐一来介绍这四个关键字. ...

  5. liunx一次安装多个软件包

    https://blog.csdn.net/finded/article/details/44955953 编写shell脚本程序 一次安装多个软件,主要用于一些软件依赖环境配置. 1.shell脚本 ...

  6. winfom实现关闭后一直运行

    using PLog; using System; using System.Collections.Generic; using System.Diagnostics; using System.L ...

  7. 转换jmeter测试结果jtl

    #bin/sh filelist=`ls jtl` # 将jtl目录的所有文件列表读取并存入变量 for file in $filelist #遍历处理各个文件 do #文件名形如 test2ad.j ...

  8. C# DateTime.Compare时间大小对比

  9. Codeforces Round #335 (Div. 2) B

    B. Testing Robots time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  10. newSingleThreadExecutor单任务线程池使用

    1.newSingleThreadExecutor单任务线程池,   一次只执行一个任务 package ThreadTest; import java.util.concurrent.Executo ...