前端跨域解决方法整理

前言

跨域行为描述： 跨域发生的位置不是服务端，而是浏览器的一种行为，也就是说没有结果是浏览器拦截了

解决方式

1、方式一

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')

2、方式二（关于预检请求）

if (method == "OPTIONS" && url == "/api/users") {

            res.setHeader('Access-Control-Allow-Credentials', 'true');
            res.writeHead(200, {
               "Access-Control-Allow-Origin": "http://localhost:3000",
               "Access-Control-Allow-Headers": "X-Token,Content-Type",
               "Access-Control-Allow-Methods": "PUT"
           });
           res.end();
        }

关于预检请求的更多资料请查看地址

3. 关于cookie的解决方案

// index.html 客户端
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    (async () => {
        // 携带cookie
        axios.defaults.baseURL = 'http://localhost:4000'

        // axios.defaults.withCredentials = true
        await axios.post("/api/save", 'a=1&b=3', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        })
    })()
</script>

// app.js 服务端

if (method == "OPTIONS" && url == "/api/users") {

   res.setHeader('Access-Control-Allow-Credentials', 'true');
   res.writeHead(200, {
     "Access-Control-Allow-Origin": "http://localhost:3000",
     "Access-Control-Allow-Headers": "X-Token,Content-Type",
     "Access-Control-Allow-Methods": "PUT"
   });
   res.end();
}
if (method == "post" && url == "/api/users") {
    //设置cookie
    res.setHeader('Set-Cookie', 'cookie1=va222;')
    res.end('aa');
}      

4. 服务端反向代理

// 服务端
var express = require('express');
const proxy = require('http-proxy-middleware')

const app = express()
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false }));

5. jsonp 方式