前端 c# VS2022 .net6 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;

})

 参考图例：

 到这里就已经完成了，两种方式，选择一种即可

相关阅读

 您阅读本篇文章共花了：