说明
我的前端框架为Vue3
前后端跨域选其一即可
前端跨域
在项目的根目录找到vite.config.js文件,添加代码:
server: {
proxy: {
'/api': {
target: 'https://localhost:xxxx',
changeOrigin: true,
secure: false
},
},
}
axios代码片段:
const req = axios.create({
服务器托管网baseURL: '/api'
})
const login = async () => {
const resp = await req.post('/login/verify', loginData.value)
respData.value = resp.data.message
}
此时,请求实际上被代理为https://localhost:xxxx/api/login/verify,不会触发跨域问题
后端跨域
在项目的根目录找到Program.cs文件,
在 var app = builder.Build() 之前添加代码(注意事项已写在注释中):
// 跨域注册(于var app = builder.Build()之前)
builder.Services.AddCors(options =>
{ // CorsPolicy为跨域策略名(可选参数)
options.AddPolicy("CorsPolicy", builder =>
{
builder
.WithOrigins("http://localhost:5173") // AllowAnyOrigin允许任何来源的跨域请求(.WithOrigins(url) 仅允许指定来源的跨域请求)
// 注意: URL末端切勿加上"/"
.AllowAnyMethod() // 允许任何HTTP方法
.AllowAnyHeader() // 允许任何He服务器托管网ader
.AllowCredentials();// 允许凭据(授权/身份验证)
// 1/2/3为默认选项 4需要人为开启
// 设置项不允许均为AllowAnyxxx()
});
});
在app.UseHttpsRedirection() 之前添加代码:
app.UseCors("CorsPolicy");
需要注意的是,此时axios中的代码片段需要稍作修改:
// .net开启CORS时, 需要完整路径
const req = axios.create({
baseURL: 'https://localhost:7043/api'
})
const login = async () => {
const resp = await req.post('/login/verify', loginData.value)
respData.value = resp.data.message
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net