vue 项目调用 .NET 5 接口-跨域问题

1、 Vue 项目接口代理配置

在项目根目录新建 vue.config.js 文件

注意：这个接口网站如果访问不成功的话，程序会自动调用前端的接口路径

module.exports = {

devServer: {

        port: 8080,

        host:'0.0.0.0',

        open: true,

        overlay: {

            warnings: false,

            errors: true

        },

        proxy:{

             // 把key的路径代理到target位置

            // detail: https://cli.vuejs.org/config/#devserver-proxy

            [process.env.VUE_APP_BASE_API]: { //需要代理的路径   例如 '/api'

                target: `http://localhost:889`, //代理到 目标路径

                changeOrigin: true,

                pathRewrite: { // 修改路径数据

                    ['^' + process.env.VUE_APP_BASE_API]: '/sxmngapi' // 举例 '^/api:""' 把路径中的/api字符串删除

                } 

            }

        },

    },

}

2、接口调用 .NET 5 接口提示：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个是不允许跨域访问，要进行设置

startUp 文件的 ConfigureServices 方法添加服务：

services.AddCors(options => options.AddPolicy("CorsPolicy", p => p

.WithOrigins("http://localhost:8080")

.AllowAnyMethod()

.WithHeaders()//"content-type"

.AllowCredentials()

));

Configure 方法添加管道：

app.useCores(CorsPolicy);