因为浏览器有同源策略,所以我们无法跨域请求,但相应的我们也有几套成熟的解决方案
一.前端方案
1.通过jsonp跨域:
2.反向代理服务跨域:
i:什么叫反向代理?
反向代理指的是在前端的服务器环境中, 短暂的开启一个后端服务器, 由后端服务器进行数据请求, 然后在将结果返回给前端
ii:使用工程化工具自带的 反向代理服务(webpack)
iii:使用第三方提供的反向代理服务(gulp中的http-proxy-middleware)
操作流程:
初始化:
npm init -y
安装gulp:
npm install gulp
安装gulp-webserver服务:
npm install gulp-webserver
gulpfile.js文件配置:
const gulp = require('gulp') //引入gulp
const server = require('gulp-webserver') //引入gulp-webserver服务
const proxy = require('http-proxy-middleware') //引入http代理服务
gulp.task('server', function() {
gulp.src('./')
.pipe(server({
port: 9001,
host: 'localhost',
livereload: true,
// directoryListing: {
// enable: true,
// path: '/'
// },
open: true,
allowEmpty: true,
middleware: [
// proxy(标记,配置项)
// proxy('/yyb', {
// target: 'http://127.0.0.1:3001/get',
// changeOrigin: true,
// pathRewrite: {
// '^/yyb': ''
// }
// }),
proxy('/users', {
target: 'http://localhost:3000',
changeOrigin: true
}),
// proxy('/login', {
// target: 'http://localhost:3000',
// changeOrigin: true
// })
]
}))
})
请求用的(index.html)文件配置:
<script>
$.ajax({
type: "get",
url: "/users",
// data: "data",
// dataType: "json",
success: function(response) {
console.log(response)
}
});
</script>