域名,协议,端口三个其中一个只要不同,就会出现跨域情况
如何解决跨域
- jsonp方式,基本原理是利用了HTML里script没有跨域限制,动态创建script标签,将src作为服务器地址,服务器callback接受返回一个参数,只能使用get请求
function jsonp(url,data,callback){
var script=document.createElement('script');
document.body.appendChild(script);
data=data||{};
data.callback='cb'+new Date().getTime();
window[data.callback]=callback;
url+="?"+$.param(data);
script.src=url;
script.onload=function(){
document.body.removeChild(script);
}
}
- cors 设置 CORS 允许跨域资源共享,需服务端配置
{
"Access-Control-Allow-Origin": "http://baidu.xxx.com"
}
{
"Access-Control-Allow-Origin": "*"
}
- 使用 vite proxy 或者node代理,webpack proxy
express 在本地创建一个服务
const express = require("express");
const app = express();
app.get("/yx", (req, res) => {
res.json({
code: 200,
message: "请求成功",
});
});
app.listen(9091, () => {
console.log("监听端口9091");
});
fetch('http://localhost:9091/yx')
fetch('/api/yx')
- vite.config.ts 中配置代理,增加server
server:{
proxy:{
'/api':{
target:'http://localhost:9091',
rewrite:(path:any)=>path.replace(/^\/api/,'')
}
}
},