VS2022 .net6 WebApi 跨域处理,vscode vue 页面跨域处理
VS2022 WebApi 跨域处理vscode vue 页面跨域处理
·
做个简单的记录
一、VS2022 .net6 后端解决方式:
在启动前注册
第一步:
//添加跨域策略
builder.Services.AddCors(options =>
{
options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().WithExposedHeaders("X-Pagination"));
});
第二步:
//使用跨域策略
app.UseCors("CorsPolicy");
参考图例:
二、vscode vue 前端解决方式:
1、在vue.config.js 配置文件中添加以下代码 ,地址需要自己根据实际情况修改
//跨域代理
devServer:{
proxy:{
'/api':{
target:'http://localhost:5080/api',
//允许跨域
changeOrigin:true,
ws:true,
pathRewrite:{
'^/api':''
}
}
}
}
参考图例:
2、组件调用后台入口:
做成简单的组件
const http = ref("/api")
//后台获取图片
export const getBanners2 = () => {
return axios.get(http.value + "/Image/GetImages")
}
参考图例:
3、页面调用组件
//引用组件
import { ref, onMounted } from 'vue'
import { getBanners2 } from '../http/index'
const images = ref();
const isShow = ref(false)
//调用组件
onMounted(async()=>{
images.value = (await getBanners2()).data
isShow.value=true;
})
参考图例:
到这里就已经完成了,两种方式,选择一种即可
更多推荐
已为社区贡献1条内容
所有评论(0)