Jsonp,CORS,http proxy反向代理解決跨域問題

http反向代理解決跨域問題

我們通常在以前後端分離的方式開發項目的時候,會遇到跨域的問題;常見的解決跨域的問題的方法有三種:

• jsonp
• CORS
• http proxy(反向代理)

1.Jsonp:

jsonp方式是利用script標籤可以訪問JS腳本,返回函數的調用 的字符串;
但是這種方的缺點是: 只能用get方式不能用其他的方式.

2.CORS:

cors方式是需要後端的朋友配合,在被請求的服務器上安裝cors並使用,例如:

// 1.安裝cors:
// npm i cors -S 
// 服務器代碼:
const express = require('express')
const app = express()
// 加載並使用cors
const cors = require('cors')
app.use(cors())
app.get('/api/getUserInfo', (req, res) => {
  res.send({
    name: '張三',
    age: 18
  })
})
app.listen(9999, function(){
  console.log('http://localhost: 9999')
})

然後瀏覽器再次發送請求,我們可以拿到響應的數據;通過瀏覽器的network可以發現Response Headers有個Access-Control-Allow-Origin: *的響應頭!

3.http proxy:

http proxy方式就是我們常說的反向代理,利用webpack打包工具中的dev-server將所有ajax請求發給devServer服務器,再由devServer服務器做一次轉發,發送給數據接口服務器;由於ajax請求是發給devServer服務器的,所以不存在跨域,而devServer由於是用node平臺發送的http請求,自然也涉及不到跨域問題!
原理如下圖所示:

前端需要配置devServer的proxy功能,在webpack.dev.js中進行配置:

devServer: {
  open: true,
  hot: true,
  compress; true,
  port: 3000,
  proxy: {
    '/api': 'http://localhot:9999', // 前端請求'/api'時,會將請求轉發給http://localhost:9999
  }
}

說明: 前端請求/api的url時候,webpack-dev-server會將請求轉發給http: //localhost:9999,此時如果請求地址爲http://localhost:9999/api/getUserInfo,請求路徑url只需要直接寫/api/getUserInfo即可;
重新啓動項目,然後發現network中之前的請求路徑http://localhost:9999/api/getUserInfo,現在改爲http://localhost:3000/api/getUserInfo,代表是devServer轉發成功!

• 如果路徑裏面沒有/api這樣的路徑的話,我們依舊可以這樣寫,但是需要修改devServer.proxy配置:

devServer: {
 open: true,
 hot: true,
 compress; true,
 port: 3000,
 proxy: {
      '/api': {
     target: 'http;//localhost:9999',
     pathRewrite: {
       '^/api': ''
     }
   }
 }
}