• 跨域调用的原理


    ASP.net WebAPI跨域调用问题

     

    最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查。在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息:

    复制代码
    <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="*" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
          </customHeaders>
        </httpProtocol>
    复制代码

    这是网上找到的其中一种方法,也有自己写跨域的特征类,也可以引用微软库cors,网上能查到很多资料,这里就不一一展开了。

    这样配置之后,我自己做Get测试,用JQ来调用也是ok的,我就以为跨域的设置已经做完了,然而天坑来了,Post操作调用不了,整天返回405错误,我就郁闷了,是怎么回事呢。

    上网查了一下跨域调用的原理,发现在跨域POST之前,是有一次OPTION方法调用,是用来确认是否运行跨域POST的握手确认过程。然后继续往下查,发现通过VS自建WebAPI工程默认有OPTION处理,默认是不允许跨域的。

    所以我就在Web.Config里面把这几个代码注释掉了

    复制代码
        <handlers>
          <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
          <remove name="OPTIONSVerbHandler" />
          <remove name="TRACEVerbHandler" />
          <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
        </handlers>
    复制代码

    最后跨域的POST请求通过了,用JQ和axios测试的。vue设置代理:https://vuejstemplates.github.io/webpack/proxy.html
    关于cors的文文章:http://www.ruanyifeng.com/blog/2016/04/cors.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // config/index.js
    module.exports = {
      // ...
      dev: {
        proxyTable: {
          // proxy all requests starting with /api to jsonplaceholder
          '/api': {
            target: 'http://jsonplaceholder.typicode.com',
            changeOrigin: true,
            pathRewrite: {
              '^/api'''
            }
          }
        }
      }
    }
  • 相关阅读:
    django model:auto_now_add 和 auto_now
    算法(2):数据结构
    Flask(2):登陆验证
    Flask(1):基本示例、配置文件、路由、请求和响应、模板渲染
    linux基础
    算法(1):查找&排序
    利用dispatch_once创建单例
    UIScrollView的属性总结
    ios开发 UITableViewController
    [深入浅出Cocoa]详解键值观察(KVO)及其实现机理
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/8526576.html
Copyright © 2020-2023  润新知