.net core webapi+vue 跨域訪問

最近在做一個前后端分離的示例，以下代碼完美解決跨域的問題

一、后端服務

1.首先我們建一個.net core webapi的項目

2.項目引用Microsoft.AspNetCore.Cors 包

3.添加cors 服務

public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            //添加cors 服務
            services.AddCors(options =>//p.WithOrigins這里就是配置策略，允許訪問的地址
　　　　　　　　options.AddPolicy("Admin", p => p.WithOrigins("http://localhost:5000", "http://localhost:9528").AllowAnyMethod().AllowAnyHeader().AllowCredentials()) ); }

4.配置Cors

  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }
            //配置Cors
            app.UseCors("Admin");
            app.UseHttpsRedirection();
            app.UseMvc();
        }

5.編寫控制器

 [Route("api/[controller]")]
    [ApiController]
    public class GetDataController : ControllerBase
    {
        // GET api/values
        [HttpGet]
        [EnableCors("Admin")]
        public ActionResult<IEnumerable<string>> Get()
        {
            return new string[] { DateTime.Now.ToString() };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public ActionResult<string> Get(int id)
        {
            return "value";
        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody] string value)
        {
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }

　　

二、前段

1.創建Vue前段項目，我這里是使用的是vue+element (自己百度創建)

2.安裝axios模塊 npm install axios -g

3.調用api

export default {

  data() {
    return {
      msg:''
    }
  },
  methods: {
    onSubmit() {
      let _self=this;
      console.log(this.form)
      axios.get('http://localhost:5000/api/GetData')

        .then(function (response) {
          console.log(response);
          _self.msg=response.data;
        })
        .catch(function (error) {

          console.log(error);

        });
    }
  }
}