Vue - .NET Core 跨域

Posted 2022-08-15 elsonww

微软官网：https://docs.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-2.2

一、.NET Core WebApi 设置跨域

// Startup 配置
public void ConfigureServices(IServiceCollection services)

     services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
     //添加 Cors 跨域,
     services.AddCors(option =>
     
          //添加一个名为 AllowAny 的策略
          option.AddPolicy("AllowAny", builder =>
          
               //配置跨域项
               builder.AllowAnyHeader();
               builder.AllowAnyMethod();
               builder.AllowAnyOrigin();
               builder.AllowCredentials();
          );
     );

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

     if (env.IsDevelopment())
     
         app.UseDeveloperExceptionPage();
     
     //使用 Cors
     app.UseCors();
     app.UseMvc();


//控制器使用
[Route("api/demo")]
[ApiController]
[EnableCors("AllowAny")] //启用Cors跨域,这里可以建一个Api控制器的基类,不必每一个都写
public class DemoController : ControllerBase

    // GET: api/<controller>
    [HttpGet("GetSomething")]
    public string GetSomething()
    
       return "Elson Je";
    

二、Vue-cli webpack 设置

//Demo
export default 
    name: ‘demo‘,
    data()
        return 
            name:‘‘
        
    ,
    created()
        let this_ = this;
        //正常写法
        //axios.get(‘http://localhost:5000/ap/demo/getSomething‘).then(……)
        
        //webpack配置代理
        axios.get(‘/api/demo/getSomething‘).then((res)=>
            this_.name = res.data;
        )  
    

//config -> index.js -> proxyTable 配置
//前端也可以配置跨域,具体请查阅资料,这里只配置了代理
proxyTable: 
   ‘/api‘: 
      target: ‘http://localhost:5000‘,
      pathRewrite: 
        ‘^api‘: ‘/‘
      
   
,

三、注意事项

1.设置跨域后有一定的安全风险,例如XSS攻击,微软文档写的很详细 (虽然机翻有点好笑,有能力的朋友可以阅读原文)

 

谦良恭卑，信诚实至；生活不易，共勉同求。