前端跨域解决方法整理

前言

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

解决方式

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 方式