前后端分离项目，如何解决跨域问题？

前后端分离项目跨(kuà)域(yù)問(wèn)题是(shì)不(bù)可(kě)避免的(de)。通常情(qíng)况下前端由React、Vue等框架编写，通过ajax請(qǐng)求(qiú)服务端API，传輸(shū)数据用(yòng)json格式。

那么爲(wèi)什(shén)么有(yǒu)跨(kuà)域(yù)的(de)問(wèn)题呢(ne)？解(jiě)决跨(kuà)域(yù)問(wèn)题有(yǒu)哪些方式？搞清楚这兩(liǎng)個(gè)問(wèn)题我们需(xū)要了解(jiě)一下什(shén)么是(shì)同源(yuán)策略。

浏覽(lǎn)器(qì)的(de)同源(yuán)策略同源(yuán)策略（Same origin policy）是(shì)一種(zhǒng)安全约定(dìng)，是(shì)所(suǒ)有(yǒu)主(zhǔ)流(liú)浏覽(lǎn)器(qì)最核心也是(shì)最基本的(de)安全功能之(zhī)一。同源(yuán)策略规定(dìng)：不(bù)同域(yù)的(de)客户端脚本在没有(yǒu)明确授权的(de)情(qíng)况下，不(bù)能請(qǐng)求(qiú)对方的(de)资源(yuán)。同源(yuán)指的(de)是(shì)：域(yù)名(míng)、协议、端口均相同。

比如(rú)我们访問(wèn)一個(gè)网站,

那么这個(gè)頁(yè)面請(qǐng)求(qiú)如(rú)下地址得情(qíng)况是(shì)这样的(de)：

另外，同源(yuán)策略又分如(rú)下兩(liǎng)種(zhǒng)情(qíng)况：

DOM同源(yuán)策略：禁止对不(bù)同源(yuán)的(de)頁(yè)面DOM进行操作(zuò)，主(zhǔ)要防止iframe的(de)情(qíng)况。比如(rú)iframe标签里放一個(gè)支(zhī)付宝付款的(de)頁(yè)面，如(rú)果没有(yǒu)同源(yuán)策略，那么钓鱼网站除了域(yù)名(míng)不(bù)同，其他的(de)则可(kě)以(yǐ)和支(zhī)付宝的(de)网站一模一样。

XML請(qǐng)求(qiú)之(zhī)前的(de)银行网站，便可(kě)以(yǐ)轻易的(de)拿到你的(de)银行信息。

所(suǒ)以(yǐ)，正是(shì)因爲(wèi)有(yǒu)了同源(yuán)策略，大家的(de)网络环境才相对的(de)安全一些。

跨(kuà)域(yù)問(wèn)题的(de)解(jiě)决办法(fǎ)了解(jiě)了同源(yuán)策略，就(jiù)知道爲(wèi)什(shén)么会有(yǒu)跨(kuà)域(yù)問(wèn)题的(de)产生了，都(dōu)是(shì)爲(wèi)了安全。但是(shì)实际研發(fā)中，大家还是(shì)需(xū)要跨(kuà)域(yù)去(qù)访問(wèn)资源(yuán)。典型的(de)应用(yòng)场景就(jiù)是(shì)前后端分离的(de)项目了。那么我们如(rú)何(hé)去(qù)解(jiě)决跨(kuà)域(yù)問(wèn)题呢(ne)？

CORS-跨(kuà)域(yù)资源(yuán)共享CORS是(shì)一種(zhǒng)W3C标準(zhǔn)，定(dìng)义了当产生跨(kuà)域(yù)問(wèn)题的(de)时候，客户端与服务端如(rú)何(hé)通信解(jiě)决跨(kuà)域(yù)問(wèn)题。实际上就(jiù)是(shì)前后端约定(dìng)好定(dìng)义一些自定(dìng)义的(de)http請(qǐng)求(qiú)头，让客户端發(fā)起請(qǐng)求(qiú)的(de)时候能够让服务端识别出来該(gāi)請(qǐng)求(qiú)是(shì)过还是(shì)不(bù)过。

浏覽(lǎn)器(qì)将CORS請(qǐng)求(qiú)分爲(wèi)簡(jiǎn)單(dān)請(qǐng)求(qiú)和非簡(jiǎn)單(dān)請(qǐng)求(qiú)：

簡(jiǎn)單(dān)請(qǐng)求(qiú)簡(jiǎn)單(dān)請(qǐng)求(qiú)必须满足以(yǐ)下兩(liǎng)個(gè)条件：

請(qǐng)求(qiú)方式必须是(shì)HEAD、GET、POST三種(zhǒng)方法(fǎ)之(zhī)一。

。

非簡(jiǎn)單(dān)請(qǐng)求(qiú)不(bù)满足簡(jiǎn)單(dān)請(qǐng)求(qiú)条件的(de)就(jiù)是(shì)非簡(jiǎn)單(dān)請(qǐng)求(qiú)。针对非簡(jiǎn)單(dān)請(qǐng)求(qiú)，浏覽(lǎn)器(qì)会發(fā)起预检請(qǐng)求(qiú)。预检請(qǐng)求(qiú)的(de)意思(sī)是(shì)当浏覽(lǎn)器(qì)检查到你的(de)頁(yè)面含有(yǒu)跨(kuà)域(yù)請(qǐng)求(qiú)的(de)时候，会發(fā)送一個(gè)OPTIONS請(qǐng)求(qiú)给对应的(de)服务器(qì)，以(yǐ)检测服务器(qì)是(shì)否允许当前域(yù)名(míng)的(de)跨(kuà)域(yù)請(qǐng)求(qiú)。如(rú)果服务端允许該(gāi)域(yù)名(míng)請(qǐng)求(qiú)，则返回204或200状态码，浏覽(lǎn)器(qì)接收到允许請(qǐng)求(qiú)时候再继续發(fā)送对应的(de)GET/POST/PUT/DELETE請(qǐng)求(qiú)。同时服务器(qì)端也会告知浏覽(lǎn)器(qì)预检請(qǐng)求(qiú)的(de)缓存时长是(shì)多少，在这個(gè)时间范围内，浏覽(lǎn)器(qì)不(bù)会再次發(fā)起预检請(qǐng)求(qiú)。

原理基本上就(jiù)是(shì)上面说的(de)这些，实际业务中我们如(rú)何(hé)通过配(pèi)置来解(jiě)决跨(kuà)域(yù)問(wèn)题呢(ne)？基本上常见的(de)就(jiù)是(shì)三種(zhǒng)方式：

nginx配(pèi)置通常我们在nginx增加如(rú)下配(pèi)置即可(kě)解(jiě)决跨(kuà)域(yù)問(wèn)题：

用(yòng)nginx这種(zhǒng)方式是(shì)最舒服的(de)，不(bù)需(xū)要客户端和服务端多做其他工(gōng)作(zuò)，对代(dài)码无入侵。

jsonp因爲(wèi)script标签是(shì)不(bù)受浏覽(lǎn)器(qì)同源(yuán)策略的(de)影响，允许跨(kuà)域(yù)請(qǐng)求(qiú)资源(yuán)（我们的(de)每一個(gè)頁(yè)面都(dōu)引用(yòng)了大量第三方js文件）。所(suǒ)以(yǐ)可(kě)以(yǐ)利用(yòng)动态创建script标签，通过src属性發(fā)起跨(kuà)域(yù)請(qǐng)求(qiú)，这就(jiù)是(shì)jsonp的(de)原理。但是(shì)jsonp衹(zhǐ)支(zhī)持GET請(qǐng)求(qiú)，所(suǒ)以(yǐ)并不(bù)是(shì)一種(zhǒng)好的(de)方式。

服务端代(dài)码控制可(kě)以(yǐ)在服务端增加对跨(kuà)域(yù)請(qǐng)求(qiú)的(de)支(zhī)持：

这種(zhǒng)方式相当于全局过滤器(qì)，对所(suǒ)有(yǒu)請(qǐng)求(qiú)都(dōu)过滤一遍。

以(yǐ)上三種(zhǒng)方式都(dōu)可(kě)以(yǐ)一定(dìng)程度上解(jiě)决跨(kuà)域(yù)問(wèn)题，但是(shì)nginx配(pèi)置和服务端控制不(bù)能同时存在，否则会报“Access-Control-Allow-Origin Not Allow Multiple value”的(de)错误。個(gè)人比较推荐nginx配(pèi)置的(de)方式，一劳永逸，不(bù)需(xū)要每個(gè)web项目都(dōu)去(qù)编写跨(kuà)域(yù)的(de)代(dài)码。

大家在工(gōng)作(zuò)中有(yǒu)没有(yǒu)遇到过跨(kuà)域(yù)問(wèn)题呢(ne)？都(dōu)是(shì)怎么解(jiě)决的(de)？欢迎(yíng)评论区交流(liú)讨论，共同学习~