Vue3+NetCore6跨域问题解决办法

最近在写一个网站,例行跨域问题。如何解决呢?

Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域问题是什么原因造成的?

跨域问题造成的原因是浏览器约定的同源策略。简单说就是同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染。

后端解决办法:

Program.cs代码

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// 第一步声明一个变量
string CORS1 = "mycors";//名字可以随意取
builder.Services.AddControllers();

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();
// 配置服务
builder.Services.AddCors(options =>
{
    options.AddPolicy(CORS1,
    builder => builder.AllowAnyOrigin()
    .WithMethods("GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS")
    );
});
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors(CORS1); // 如果使用了Mvc,这句要放在app.useMvc()之前!!!
app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

前端解决办法:

在vue.config.js中加入这个代码,配置一个代理

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    devServer: {
        proxy: {
            '/api': {
                target: 'https://localhost:7172/api', //后端接口地址
                changeOrigin: true, //是否允许跨越
                pathRewrite: {
                    '^/api': '' //路径重置,
                }
            }
        },
    },

})

在发送请求,创建请求实例的时候代码

const $http = axios.create({
    baseURL: "/api",
    timeout: 2000,
    headers: {
        "Content-Type": "application/json,charset=utf-8"
    }
});

以上两种解决办法,任选其一即可!

  • 0
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

右左右左右

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值