跨域： 汇总

模拟一个跨域

先 npm i express
再node cors.js

// cors.js
const express = require('express')
const app = express()
app.get('/', function (req, res) {
    
    res.send('hello world')
})
app.listen(3003)

//http.html
<script>
    fetch('http://localhost:3003/')
        .then(response => console.log(response))
</script>

liverserver启动 访问http.html出现跨域
错误如下：

解决方式一：配置Access-Control-Allow-Origin字段或使用cors插件

// cors.js
const express = require('express')
const app = express()
app.get('/', function (req, res) {
    
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    // //允许的header类型
    // res.header("Access-Control-Allow-Headers", "content-type");
    // //跨域允许的请求方式 
    // res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    res.send('Hello World')
})
app.listen(3000)

或

// cors.js
const express = require('express')
const app = express()

const cors = require('cors')
app.use(cors())

app.get('/', function (req, res) {
    
})
app.listen(3000)

解决方式二: script静态资源不存在跨域，可以使用jsonp

// cors.js
const express = require('express')
const app = express()

app.get('/', function (req, res) {
    
    // 方式三
    const callback = req.url.split('=')[1];
    res.statusCode = 200;
    // 返回JSONP格式数据
    res.end(`${
      callback}({"name": "JSONP"})`);
})

app.listen(3000)

// http.html
<script>
      function printName(data) {
    
          document.write('hello ' + data.name);
      }
  </script>
 <script src="http://127.0.0.1:3000/?callback=printName"></script>

解决方式三: 客户端请求其它

/cors.js
// 方式四(透传)
const express = require('express')
const app = express()

const axios = require('axios');
const {
     json } = require('body-parser');
const {
     Console } = require('console');
app.get('/touchuan', function (req, res) {
    
    res.header("Access-Control-Allow-Origin", "*");
    // 其它服务器的接口
    axios.get('http://qcds.vivo.xyz/query/version_infos?version_name=1.9.4.990')
    .then( (data) => {
    
      res.send(JSON.stringify(data.data))
    })
})

app.listen(3000)

// http.html
    <script>
        fetch('http://localhost:3000/touchuan')
        .then(response => console.log(response))
    </script>

与之类似的还有 image请求