前端处理跨域的四种方案

在前后端分离的开发模式广泛应用的过程中,我们不得不面对跨域这个问题,而为什么会出现跨域呢?什么情况下称为跨域呢?

跨域源自浏览器的同源策略,同源策略又分为了两种

1. ajax——协议+主机+端口,其中一个与之前页面所在的不一样,就称为ajax跨域了

2. iframe——iframeA到iframeB过程中操作共享数据,比如访问window.name会因为跨域而报错

因此,当前后端分离之后,前端的页面可能处于8080端口,而后端服务器可能处于9000端口上,那么,在前端页面向服务器发起请求时,便触发了跨域问题。

有什么办法可以解决跨域问题呢?方法有四种。

一、jsonp

原理:使用script标签,加载js代码并执行,需要在js中声明一个函数,用来作为js代码回来后的调用,参数是后台数据

    请求方式:GET方式

    特点:没有兼容性问题,但前后端都需要书写代码

    写在html文件——编写全局函数+script标签+传递函数名

        1.script标签的创建及加载 var script = document.createElement('script')

        2.服务器返回的数据 需要在函数中执行

        3. 挂载一个全局函数

            var callbackName = 'callback_' + Date.now();    //起个名字

            window[callbackName] = function (data) {    //全局函数

                //....

            }

        4.把这个函数名传递给服务器

            script.src = 'http://localhost:8889/jsonp?callback='+callbackName;//请求后台端口

        5.将标签插入body中    

            document.body.appendChild(script);

    服务器——响应“函数名('数据')”的字符串,让script标签执行

        1. 从请求url参数中获取callback对应的值 var cb = url.parse(req.url, true).query.callback

        2. 拼接“函数名(数据)”的字符串返回给字符串

            //data为对象的话使用JSON.stringify()转换后再传输

             res.end(`${cb}(${data})`);

二、CORS(跨域资源共享)

    安全性不好

    至少IE10支持

    服务器为响应头设置'Accesss-Control-Allow-Origin'等:

  Access-Control-Allow-Origin: 'http://xxx.com'  //允许哪个域在跨域的时候访问,*代表所有

  Access-Control-Allow-Credentials: true          //是否允许携带证书。cookie跨域写回给浏览器,默认不会自动携带,需要客户端设置携带并且服务器允许携带cookie才能完成跨域,同时客户端也要设置withCredentials:true + Origin不能是*

  Access-Control-Allow-Methods: 'GET,POST,PUT,DELETE';   // 默认允许get/post

  Access-Control-Allow-Headers:'xxx';   // 允许你自己加的头来通信

    *option(预检请求)——浏览器向服务器发起的OPTIONS预检请求,如果服务器不满足条件,则拒绝ajax请求。触发点:1.非简单请求方式(get/post之外)2. 加入了自定义的头;3. 当content-type是非键值对application/json;

三、代理

原理:通过node服务器加载本页面,再通过node服务器访问其它服务器

proxy原理:服务器本身不受所谓浏览器同源策略的影响

    下载依赖包:npm i request -S

    前端:请求node服务器的接口

    服务器:

        http.createServer((req, res) => {

            //1. 创建一个客户端对象,执行url

            var x = request('http://api.douban.com/xxx/xx/x');

            //2. 把浏览器原本的请求信息通过管道流到新的请求对象中,并请求

            req.pipe(x);    // req => x

            //3. 把这次请求的响应通过管道流到页面的相应中

            x.pipe(res);    // x => res        

        })

四、使用工具

nginx代理

目录命令行启动:start nginx     //启动主体进程-》工作进程

配置文件:nginx.conf

    server {

        listen: 端口;

        location: 页面配置;

    }

    location /apis {

        //代理动作设置

    }

一些基本命令:

*关闭代理服务器:nginx -s stop

*重新加载:nginx -s reload

前端页面请求接口'/apis/接口' 与后台约定标记需要代理的接口

你可能感兴趣的:(前端处理跨域的四种方案)