前端处理跨域的4种方式
跨域
跨域介绍
浏览器出于安全考虑，做了同源策略限制，浏览器会拒绝跨域请求。
同源策略
请求的时候，拥有相同的协议、域名、端口，只要有一个不同都属于跨域。
解决跨域
JSONP
通过 script 标签中的 src 不受同源策略的限制，可以实现跨域请求数据。
只能通过 get 请求。
客户端
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>const request = (callbackName) => {const script = document.createElement("script");script.src = `http://127.0.0.1:3000/api/user/list?callback=${callbackName}`;document.body.appendChild(script);return new Promise((resolve, resject) => {window[callbackName] = (res) => {resolve(res);};});};request(`callback${new Date().getTime()}`).then((res) => {console.log(res);});</script></body>
</html>
服务端
import express from "express";const app = express();app.get("/api/user/list", (req, res) => {const { callback } = req.query;res.send(`${callback}(${JSON.stringify([{id: 1001,name: "alex",age: 23,},])})`);
});
app.listen(3000, () => {console.log("server running");
});
DEV 使用代理（前端）
使用vite配置反向代理
import { defineConfig } from "vite";export default defineConfig({server:{proxy:{'/api':{target:'http://127.0.0.1:3000',changeOrigin:true}}}
})
设置请求头（后端）
只需要开启允许跨域
import express from "express";const app = express();app.get('/api/role/list',(req,res)=>{res.setHeader('Access-Control-Allow-Origin','*');res.setHeader('Access-Control-Allow-Origin','协议+指定IP地址+端口')
})
app.listen(3000,()=>{console.log('server running')
})nginx
server{listen 192.168.67.100:80;server_name www.pc.com;root /apps/nginx/html/pc;location / {proxy_pass http://192.168.67.101;
}