【面试题】前端跨域的常见方式

有9种或者更多

常见的有四种

1 jsonp ,原理为使用html特殊标签访问资源无跨域限制的特性（script，link，img...）,进行跨域请求。

    具体实现步骤：

        1 前端写好全局函数如 aFun() {},

        2 后端返回此函数名(函数名可以是前端入参的?callback=xxxFun)包裹的data数据函数调用

        3 script调用后即直接运行全局函数aFun的后续数据处理

jsonp的缺点很明显只能get请求，于是出现了其他的请求。

2  cors 方式请求，前端不处理，后端处理就行， cors-allow 允许跨域配置。*或者具体域名，具体域名只能写一个，*任何域名时候不能带cookies

express代码

var express=require('express');

var url=require('url');

var app=express();

var allowCrossDomain = function(req, res, next) {

    res.header('Access-Control-Allow-Origin', 'http://localhost:63342');

    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

    res.header('Access-Control-Allow-Headers', 'Content-Type');

    res.header('Access-Control-Allow-Credentials','true');

    next();

};

app.use(allowCrossDomain);

app.get('/checkEmail',function (req,res,next) {

    var queryValue=url.parse(req.url).query;

    if(queryValue==='[email protected]'){

        res.send(true);

    }else {

        res.send(false);

    }

});

app.listen(3001);

3 nginx 反向代理

4 webpack proxy 配置     原理是在前后两端加个nodejs中间代理服务

    虽然不需要后端配合很方便 但是 只能解决开发环境

我的配置

默认情况下没有此文件的话进行创建即可，在打包的时候webpack会自动检测并根据其指导进行打包

vue开发环境和生产环境里面解决跨域的几种方法

https://www.cnblogs.com/pass245939319/p/9040802.html

官方文档

https://webpack.docschina.org/configuration/dev-server/#devserver-proxy

其他优秀文章

https://segmentfault.com/a/1190000016314976