zoukankan      html  css  js  c++  java
  • react .net core 发布 Access-Control-Allow-Origin Cors

    本案例用IIS部署

    1. 在react上先publish: npm run build

    生成了build文件,在此文件里添加web.config,注意httpProtocol是用来跨域的。

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
    <system.webServer>
    <httpProtocol>
    <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
    </httpProtocol>

    <rewrite>
    <rules>
    <rule name="ReactRouter Routes" stopProcessing="true">
    <match url=".*" />
    <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.html" />
    </rule>
    </rules>
    </rewrite>
    </system.webServer>
    </configuration>

    该文件添加完毕以后,可以在IIS上部署起来,基本都是默认配置,配置完以后可以去HTTP Response Headers里查看一下web.config的内容有没有。

    2. publish .net core项目,此操作也需要修改publish完以后生成的web.config,生成以后放入IIS新的站点里。

    值得注意的是,.net core 的cors也需要这么做:

    由于我们这次是API,所以controller这里这么用:

    web.config里添加一下内容,我们没有额外添加Access-Control-Allow-origins是因为已经在code里用allowspecificorigon添加了。

    <httpProtocol>
    <customHeaders>
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
    </customHeaders>
    </httpProtocol>

    当然如果你需要部分跨域,可以在method这里加,我们因为全都需要,所以就在最开头加了。

    希望对大家有帮助。

  • 相关阅读:
    什么是跨域?什么是同源策略?如何解决
    安装路由的环境
    react的开发环境
    遍历列表,遍历对象,以及组件
    redux 状态管理工具
    react的钩子函数
    json-server
    react中的setState,受控组件和非受控组件以及组件的传值
    vue中的插槽
    react遍历列表
  • 原文地址:https://www.cnblogs.com/mabelhua/p/10131156.html
Copyright © 2011-2022 走看看