首页 > 其他分享 >关于netcore webapi 前后端分离跨域配置

关于netcore webapi 前后端分离跨域配置

时间:2023-02-09 00:35:00浏览次数:51  
标签:webapi 127.0 http 跨域 netcore 0.1 app policy

最近做一个后台管理系统,但是期间遇到了跨域的问题,所以在此记录一下。这些问题都是很初级的基础知识。
后台配置需要先配置指定域名跨域,这也是为了防止安全。

一、关于netcore webapi 跨域配置

在Startup.cs文件中,找到 ConfigureServices(IServiceCollection services) ,添加如下代码:
services.AddCors(options => { options.AddPolicy("CustomCorsPolicy", policy => { // 设定允许跨域的来源,有多个可以用','隔开 policy.WithOrigins("http://127.0.0.1:8080") .AllowAnyHeader() .AllowAnyMethod() .AllowCredentials(); }); });
如果是多域名,可以在这个 policy.WithOrigins("http://127.0.0.1:8080,http://127.0.0.1:8081")。
记住,不能在域名最后面带斜杠,如:policy.WithOrigins("http://127.0.0.1:8080/,http://127.0.0.1:8081/"),
这样写的话没效果的。

接着,在
Configure(IApplicationBuilder app, IWebHostEnvironment env)增加如下代码: app.UseCors("CustomCorsPolicy"); ,
这个必须在 app.UseRouting(); 和 app.UseEndpoints 之间,否则可能会失败。后端配置完了,接着前端就可以直接访问。

二、经常遇到的问题

在跨域调试中,我经常遇到最多的提示代码是415错误和404的错误,是因为什么,最主要是因为传递的接口参数,所以这一块还是需要多了解,比如,如果是Get请求,参数需要附带Getdymine([FromQuery] LoginModel model) 或者 GetDemo([FromQuery]string value),如此参数才能序列化正常。
另外,前端记得增加Content-Type类型,不然,一样是报错。

标签:webapi,127.0,http,跨域,netcore,0.1,app,policy
From: https://www.cnblogs.com/mylinx/p/17103810.html

相关文章

  • WebAPI_DAY7_正则表达式
    步骤定义正则表达式检测查找是否匹配定义正则表达式letname=/表达式/其中//是正则表达式字面量判断是否有符合规则的字符串_test()letstr='eeeeeeeeexung......
  • 同源策略及跨域
    答:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。同源策略并不是浏览器不让请求发出去、或者后端拒绝返回数据。实际情况是请求正常发出去......
  • netcore日志
    1.日志信息源ILoggingILogging//nuget包Microsoft.Extensions.LoggingMicrosoft.Extensions.Logging.Console//控制器publicclassWeatherForecastController:C......
  • 9种跨域方式实现原理
    摘要:当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。本文分享自华为云社区《​​九种跨域方式实现原理咋回事​​......
  • 9种跨域方式实现原理
    摘要:当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。本文分享自华为云社区《九种跨域方式实现原理咋回事》,作者......
  • Chrome浏览器跨域问题处理
    1、在电脑上新建一个目录(任意位置)例如D:\chrome2、右键点击谷歌浏览器,选择属性;3、在目标输入框尾部加上  --disable-web-security--user-data-dir=D:\chrome ......
  • 关于NGINX配置来解决CORS跨域资源共享的分析
     跨域主要涉及4个响应头:Access-Control-Allow-Origin用于设置允许跨域请求源地址(预检请求和正式请求在跨域时候都会验证)Access-Control-Allow-Headers跨域允许携带......
  • React18使用 http-proxy-middleware代理跨域
    1、安装$npminstallhttp-proxy-middleware--save$#or$yarnaddhttp-proxy-middleware 2、创建 src/setupProxy.js (src目录下创建文件夹)const{createPro......
  • aws云上部署vue代码+nodeJS跨域配置
    大致需求客户想要构建一个新的客户站点,前端通过Https来访问VUE界面,然后VUE跨域Https访问后端的接口服务,通过NodeJS来提供后台服务。假定是全新的服务,本文从域名申请配置、CD......
  • 基于.NetCore开发博客项目 StarBlog - (26) 集成Swagger接口文档
    前言这是StarBlog系列在2023年的第一篇更新......