express+cors模擬解決跨域

模擬寫的node服務器請求

const express = require('express')
const app = express()

app.get('/api/getname', (req, res) => {
  res.send({
    name: '黎明',
    age: 18
  })
})

app.listen(3000, () => {
  console.log('connect host3000')
})

 

使用客戶端訪問請求

import axios from 'axios'

let host = 'http://127.0.0.1:3000'
let url = host + '/api/getname'

axios.get(url).then(res => {console.log(res)})

 

啟動項目報錯

Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/getname' from origin 'http://localhost:8070' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

跨域問題,在node項目安裝cors

cnpm i cors -S

修改express配置

const express = require('express')
const app = express()
const cors = require('cors')

app.use( cors( ) )
app.get('/api/getname', (req, res) => {
  res.send({
    name: '黎明',
    age: 18
  })
})

app.listen(3000, () => {
  console.log('connect host3000')
})

 

重新啟動項目,可以訪問接口數據

 

如果配置cors后還是報跨域錯誤,或者提示has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes

檢查一下請求路徑是否與服務器路徑一致,清空瀏覽器緩存在試,一般沒有問題