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;
})

 参考图例：

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