使用webpack-dev-server处理跨域请求的方法
在前端调试的时候,跨域一直都是一个比较麻烦的问题,这个在之前的文章 关于跨域问题的一个解决方法中其实已经讨论了一些可以使用的方法。
如果要使用 JSONP,第一是需要修改的地方比较多,而且也不太符合前端发展的大趋势,如果使用 CORS 的话并没有 application/json 类型。而且更重要的是这只是在前端调试时候的需求,并不是在上线以后的需求,所以对后端有太多的入侵也不好。
所以就有一个念想突然在大脑中闪过——加入有一个代理不就可以解决这个问题了?但是又想了一下写起来还挺麻烦,于是就被搁置了。
直到前几天 Stone 提到其实 webpack-dev-server 早就想到并且已经帮我们实现了。
于是,我就在一个 Vue 项目中进行测试,发现真的很赞,既可以本地 Server 热加载,还可以直接跨域调用远程 API,完美解决了之前遇到的所有问题。
接下来我简要介绍一下步骤(以一个 Vue 脚手架建立的 webpack 项目为例):
首先检查 build/webpack.dev.conf.js 中是否有
proxy: config.dev.proxyTable,
这个配置项,如果被注释掉,请打开注释,如果没有,请加入到 devServer 对象中
然后在 config/index.js 中的 dev 对象中加入 proxyTable 配置项:
proxyTable: { '/**': { target: 'http://api.xxx.com', changeOrigin: true, secure: false } },
前面的键 /** 意思是代理所有请求,如果代理某些请求,可以将其改为诸如 /api 之类的字符串。
后面的 target 就是要代理到的网站,changeOrigin 的意思就是把 http 请求中的 Origin 字段进行变换,在浏览器接收到后端回复的时候,浏览器会以为这是本地请求,而在后端那边会以为是在站内的调用。
这样,通过这个简单的配置,就完美地解决了跨域的问题。
之后,在直接运行
npm run dev
的时候,就可以将测试前端中的 ajax 请求代理到后端服务器进行测试啦!
最后,贴上官方文档,具体的配置大家可以参考这里:
https://webpack.js.org/configuration/dev-server/#devserver-proxy
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解webpack-dev-server 设置反向代理解决跨域问题
一.设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的诞生,前后端开发模式越来越流行.后端只负责接口,前端负责数据展示.逻辑处理.但是前后端开发模式,有一个重要的问题,就是跨域问题. 二.如何配置webpack的代理 webpack代理需要另外一个插件:webpack-dev-server webpack-dev-server配置代理非常的方便,只需要条件一个proxy属性,然后配置相关的参数就可以了: var webpack = require('webpack');
-
详解webpack-dev-server使用http-proxy解决跨域问题
文档资料 webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题--虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware--webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack的配置文件(webpack.config.js)中进行配置 module.exports = { ...此处省略
-
使用Nginx 反向代理来避免 ajax 跨域请求的方法
服务器上 nginx + tomcat ,其中 nginx 监听 80 端口, tomcat 监听 8080 端口. 因为对前端不熟悉,以为用 ajax 就可以不需要 callback ,然而前端的同学说不跨域的情况下才不需要 callback ,让我在返回的 json 里加上.可是我刚刚学会了最基本的 spring-mvc 用法,根本不知道怎么加上 callback 网上到时找到一些可行的代码,差不多这个样子: @RequestMapping(method=RequestMethod.GET,
-
基于CORS实现WebApi Ajax 跨域请求解决方法
概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多
-
jquery+ajax实现跨域请求的方法
本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为 "jsonp" :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({ type: "GET", url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin", dataType: "j
-
Laravel开启跨域请求的方法
项目中用到了接口,外部调用的时候老是请求不到,本地请求却没问题,查了下说是因为跨域的问题. 根据网上所说解决方法如下: 1.建立中间件Cors.php 命令:php artisan make:middleware Cors 在/app/Http/Middleware/ 目录下会出现一个Cors.php 文件. 2.在handle 方法中加入如下内容: $response = $next($request); $response->header('Access-Control-Allow-Orig
-
vue-cli开发环境实现跨域请求的方法
前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可. //例如要请求的接口url为http://172.3.2.1:8000/look/1 module.exports = { dev:{ proxyTable:{ '/api':{ target: 'http://172.3.2.1:8000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } 这时在你想请求
-
Ajax jsonp跨域请求实现方法
什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 h
-
JAVA通过Filter实现允许服务跨域请求的方法
概念 在 HTML 中,<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax 都可以指向一个资源地址, 而所谓的跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不一样. 这里的域指的是这样的一个概念:我们认为若协议 + 域名 + 端口号均相同,那么就是同域即我们常说的浏览器请求的同源策略. Jsonp 在前后端分离的项目中,会经常遇到需要跨域请求的问题.跨域请求有
-
使用webpack-dev-server处理跨域请求的方法
在前端调试的时候,跨域一直都是一个比较麻烦的问题,这个在之前的文章 关于跨域问题的一个解决方法中其实已经讨论了一些可以使用的方法. 如果要使用 JSONP,第一是需要修改的地方比较多,而且也不太符合前端发展的大趋势,如果使用 CORS 的话并没有 application/json 类型.而且更重要的是这只是在前端调试时候的需求,并不是在上线以后的需求,所以对后端有太多的入侵也不好. 所以就有一个念想突然在大脑中闪过--加入有一个代理不就可以解决这个问题了?但是又想了一下写起来还挺麻烦,于是就被搁
-
vue2.0设置proxyTable使用axios进行跨域请求的方法
这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用. 先在<script>中引入 用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名. 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方的
-
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了 直接上解决办法 首先在config目录下配置index.js文件如下 然后在webpack.dev.conf中配置如下 当然
随机推荐
- nuxt+axios解决前后端分离SSR的示例代码
- 在linux中导入sql文件的方法分享(使用命令行转移mysql数据库)
- 在Tomcat服务器下使用连接池连接Oracle数据库
- Maven的几个常用plugin
- 基于jquery插件实现常见的幻灯片效果
- php实现将数组转换为XML的方法
- destoon整合UCenter图文教程
- Python原始字符串与Unicode字符串操作符用法实例分析
- 详解Python多线程Selenium跨浏览器测试
- 用ASP实现分级权限控制
- Node.js的特点和应用场景介绍
- C++类中的常数据成员与静态数据成员之间的区别
- 详解Node项目部署到云服务器上
- 微信小程序 checkbox组件详解及简单实例
- 简单介绍JavaScript数据类型之隐式类型转换
- javascript function调用时的参数检测常用办法
- js中new一个对象的过程
- Python提取Linux内核源代码的目录结构实现方法
- apache配置开启网站服务步骤
- 在Python中使用全局日志时需要注意的问题