Node設置cors,後端解決跨域問題

跨域說的太多了,這裏再也不解釋,瀏覽器web的同源策略形成的,目前跨域前端和後端都是能夠解決的,今天主要說後端經常使用的解決辦法
CORS:W3C的標準技術,主要全稱是Cross-Origin Resource Sharing,中文叫跨域資源共享技術,官網:'https://www.w3.org/TR/cors/',若是你要看這個官網的解釋,能夠看看下面的這個,簡單解釋就是當代瀏覽器會將跨站點異步訪問的權限交給CORS來處理解決跨域問題,一般有兩種設置方式,本文案例以node爲例子,上代碼

方式一:直接使用npm裏面的cors包,簡單粗暴.

**安裝包  npm install cors  -S**


const app=express();//基於node裏面的express服務器

//我這邊使用了中間件
var cors=require("cors");

app.use(cors()); 

//後面的代碼會引入我後端的接口,相似於一個react.js,經過express路由引入後,服務端接口配置完畢,此方式太暴力,解決了全部請求頭和方式設置的繁瑣問題,缺點如何要攜帶cookie這種方式顯然不適合

方式二:也是基於express中間件設置,只不過會設置具體請求頭,請求方式,能夠攜帶Cookie.

const express = require('express')

const app = express();

app.use((req, res, next) => {
//判斷路徑
  if(req.path !== '/' && !req.path.includes('.')){
    res.set({
      'Access-Control-Allow-Credentials': true, //容許後端發送cookie
      'Access-Control-Allow-Origin': req.headers.origin || '*', //任意域名均可以訪問,或者基於我請求頭裏面的域
      'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', //設置請求頭格式和類型
      'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',//容許支持的請求方式
      'Content-Type': 'application/json; charset=utf-8'//默認與容許的文本格式json和編碼格式
    })
  }
  req.method === 'OPTIONS' ? res.status(204).end() : next()
})

補充一點OPTIONS:OPTIONS方法是用於請求得到由Request-URI標識的資源在請求/響應的通訊過程當中可使用的功能選項。經過這個方法，客戶端能夠在採起具體資源請求以前，決定對該資源採起何種必要措施，或者瞭解服務器的性能,咱們常見的請求就是get或者post,那麼哪裏查看options請求,看圖:

至於後端是Java或者php,也是同樣能夠用這種方式設置的,只是寫法不一樣