跨域問題-cors

什麼是跨域
如你們所知，出於安全考慮，瀏覽器會限制腳本中發起的跨站請求。好比，使用 XMLHttpRequest 對象發起 HTTP 請求就必須遵照同源策略（same-origin policy）。 具體而言，Web 應用程序能且只能使用 XMLHttpRequest 對象向其加載的源域名發起 HTTP 請求，而不能向任何其它域名發起請求。

解決策略
一、古老的jsonp方法（很麻煩須要先後端配合，並且只能用get方式）
二、反向代理（沒用過，想了解的能夠百度）
三、h5的CORS（很方便前端，由於這個是後端負責）

我只講CORS（其它的另開篇幅）

目前我在使用先後端分離的項目，而後就出現了跨域問題。先後端分離是大勢所趨，跨域就顯得尤其常見啊
在尋找跨域解決方案時，發現了最優雅解決方案就是HTML5來帶了的「Cross-Origin Resource Sharing」的新特性，來賦予開發者權力決定資源是否容許被跨域訪問。
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
只要服務器實現了CORS接口，就能夠跨源通訊。

 

你們看到沒有，這是兩個不一樣的項目，一個跑在tomcat服務器下，一個在nginx服務器下。端口ip都不同，就產生了跨域

利用cors解決跨域
在後端，開啓cors接口，容許跨域請求，前端就能夠跨域了
只須要在springmvc的xml配置文件（默認爲dispatcher-servlet.xml）加入這句就好了

<!--path：容許請求的接口-->
    <!--origins：容許被哪些網站請求-->
    <!--methods：容許哪些http行爲-->
    <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="http://127.0.0.1:8020"
                     allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                     allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                     allow-credentials="true" />
    </mvc:cors>

 

再看

 

 

因此啊，跨域問題，面試官請不要老問咱們前端怎麼解決，不少辦法必須是後端配合或者是純後端解決，咱們前端搞不了。
jsonp須要先後端配合，後端返回jsonp格式的數據，咱們前端根據商量好的函數名，來取
反射代理，徹底由後端作
cors，徹底由後端作，咱們瀏覽器開放了權限，但也不是咱們前端左右的
-----因此，不要再問咱們前端跨域怎麼解決了，沒有意義！！！！！-----

 

cors跨域特殊說明

簡單請求與複雜請求

說的cors跨域，還要作特殊說明：

CORS能夠分紅兩種：簡單請求、複雜請求

一個簡單的請求大體以下：

HTTP方法是下列之一

HEAD
GET
POST

 

HTTP頭信息不超出如下幾種字段

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type，但僅能是下列之一
application/x-www-form-urlencoded
multipart/form-data
text/plain

 

任何一個不知足上述要求的請求，即被認爲是複雜請求。

 

區別

複雜請求表面上看起來和簡單請求使用上差很少，但實際上瀏覽器發送了不止一個請求。其中最早發送的是一種"預請求"，我也叫它爲探路，此時做爲服務端，也須要返回"預迴應"做爲響應。預請求其實是對服務端的一種權限請求，只有當預請求成功返回，實際請求才開始執行。

因此看到複雜cors請求的時候都會看到兩次請求，一次爲opton，一次爲真正的請求

 

 

 

nodejs作後端跨域設置例子
以上是以java爲例子，全部的後端語言均可以設置這個，下邊就拿node爲例子【koa2框架】

const Koa=require ('koa');
const app=new Koa();
app.use(async (ctx, next) => {
    ctx.response.set('Access-Control-Allow-Origin', '*');//指定容許某域名訪問：‘localhost:8080等等’
    ctx.response.set('Access-Control-Allow-Methods', '*');//指定容許某方法訪問：‘get、post等等’
    ctx.response.set("Access-Control-Allow-Headers", "origin, content-type,token");//服務器支持的全部頭信息字段.服務端一般是根據請求頭（headers）中的 Content-Type 字段來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析
    if (ctx.request.method == "OPTIONS") {
        ctx.response.status = 200
    }else{
        await next();
    }
});

 

原生node

let http = require("http");
http.createServer(function () {
    response.writeHead(200,{
        'Access-Control-Allow-Origin':'*',
        'Access-Control-Allow-Methods':'*'
    });//能夠解決跨域的請求
    response.write("Hello World\n");
    response.end();
}).listen(8082);

 

 

 

 參考有：

http://www.ruanyifeng.com/blog/2016/04/cors.html

http://www.poorren.com/cross-origin-resource-sharing-simple-complex