开发前端项目的时候，经常会因为跨域问题导致不能在本地调试远程的ajax接口（如：XMLHttpRequest cannot load http://***. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.）。
当然可以通过后端配置来解决，但是作为前端，我们也有自己的方法。原理应该就是自己搭建一个本地服务器，然后写相应的代码来实现数据的转接。nodejs就是可以用http.request，php可以用Curl等等。当然对于不了解后端代码的童鞋也不用担心，我们可以运用一些前端工具来完成。
这里主要介绍gulp的http-proxy-middleware组件（官网：https://www.npmjs.com/package/http-proxy-middleware）。
假设我们的远程接口是http://web.zhaicool.net/api/ajax.php
本地服务器链接是 http://localhost:8080
那么对应的gulpfile.js文件代码为：
var gulp = require('gulp'),
proxyMiddleware = require('http-proxy-middleware'),
connect = require('gulp-connect');
gulp.task('server',
function () {
var middleware = proxyMiddleware(['/api'], {
target: 'http://web.zhaicool.net/',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
});
connect.server({
root: './src',
port: 8080,
livereload: false,
middleware: function (connect, opt) {
return middleware
}
});
});
项目中比如index.html的接口如下配置：
//我是引入了jquery，所以直接用$ajax
$.ajax({
type: "GET",
url: "http://localhost:8080/api/ajax.php",//接口本应该是http://web.zhaicool.net/api/ajax.php，但是被http-proxy-middleware转接了
success: function (data) {
alert(data);//helloworld
}
});
如果涉及到多个接口，可以写多个middleware
gulp.task('server',
function() {
var middleware1 = proxyMiddleware(['/api1'], {
target: 'http://web.zhaicool.net/',
changeOrigin: true,
pathRewrite: {
'^/api1': '/api1'
}
});
var middleware2 = proxyMiddleware(['/api2'], {
target: 'http://web.zhaicool.net/',
changeOrigin: true,
pathRewrite: {
'^/api2': '/api2'
}
});
var middleware3 = proxyMiddleware(['/api3'], {
target: 'http://web.zhaicool.net/',
changeOrigin: true,
pathRewrite: {
'^/api3': '/api3'
}
});
connect.server({
root: './src',
port: 8080,
livereload: false,
middleware: function(connect, opt) {
return [middleware1,middleware2,middleware3]
}
});
});
以上是gulp中的相关设置，如果用vue-cil搭建vue项目，也有相关的方法，即在config文件夹下的index.js文件，找到module.exports对象中的dev对象，修改dev对象的proxyTable属性：
proxyTable: {
'/api': {
target: 'http://web.zhaicool.net/',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
},
方法跟上面的gulp一样。
0 条评论。