[JavaScript知识库]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);