前后端分离项目需要解决第一个问题就是,前端本地开发时如何解决通过ajax请求产生的跨域的问题。一般的做法是通过本地配置nginx反向代理进行处理的,除此之外,还可以通过nodejs来进行代理接口。当然,要实现这个前提是,前端开发环境必须运行在nodejs服务中,所幸的是,现在前端的开发自动化工具都是建立在nodejs上的,所以这个前提也不是很重要。
webpack-dev-server配置跨域方案
如果你项目是用webpack作为前端自动化构建工具的话,那么可以引用webpack-dev-server来进行配置跨域方案。webpack-dev-server是一个小型的nodejs服务器,是基于express框架的,用于实时监听和打包编译静态资源。其中里面有一个属性是proxy,是专门来配置代理请求接口的。
举个例子:
比如我现在通过webpack构建了一个本地开发环境,端口号是9000,现在我要在本地去请求(GET) http://jsonplaceholder.typicode.com/users 地址获取数据,如果前端没有设置代理的话,请求会因为跨域请求失败。这时候通过如下配置,就可以正常请求了。
devServer: { contentBase: __dirname + "/", port: 9000, proxy: { "/users": { //需要代理的路径 target: "http://jsonplaceholder.typicode.com", //需要代理的域名 changeOrigin: true //必须配置为true,才能正确代理 } } }
通过如上配置,然后在js里面这样请求就可以成功拿到数据了:
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26