前后端跨域解决方案

因为浏览器有同源策略,所以我们无法跨域请求,但相应的我们也有几套成熟的解决方案

一.前端方案

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>

二.后端方案: