.Net前后端分离开发部署说明

1.1 目的

最近在项目中因前后端部署不同地方，前端在请求后端api时发生了跨域请求，我们采用(跨域资源共享)来解决跨域请求，这需要前后端的配合来完成,

1.2后端项目配置

  由于在开发和部署的过程中都会存在跨域问题,在局域网内可能因为API的端口不同造成跨域,后端项目要值得注意一些配置,一般在webconfig的xml文档中如下配置:

<httpProtocol>

      <customHeaders>

        <!--注意这个地方为前端项目的开发或者线上地址,一定要写-->

        <!--支持全域名访问，不安全，部署后需要固定限制为客户端网址-->

        <add name="Access-Control-Allow-Origin" value="http://192.168.3.11:8088" />

        <!--支持的http 动作-->

        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

        <!--响应头 请按照自己需求添加 这里新加了token这个headers-->

        <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With" />

        <!--允许请求的http 动作-->

        <add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

<!--注意这个地方后端做了配置,前端请求方法一定要设置Credentials为true,允许在get或post请

中携带cookies,具体看后端代码怎么写的-->

        <!--允许跨域请求时保存cookies-->

        <add name="Access-Control-Allow-Credentials" value="true" />

      </customHeaders>

    </httpProtocol>

为了便于局域网内访问,真机调试,需要设置以IP的方式去访问，需要做一下配置,:

以管理员的方式运行IDE,IIS的Express修改如下,

 

找到配置文件添加

<site name="mysqlFrame.wyweb" id="39">

      <application path="/" applicationPool="Clr4IntegratedAppPool">

            <virtualDirectory path="/" physicalPath="E:\xxxx\run_jk\mysqlFrame.wyweb" />

       </application>

       <bindings>

            <binding protocol="http" bindingInformation="*:26914:localhost" />

    <binding protocol="http" bindingInformation="*:26914:192.168.3.11" />

       </bindings>

</site>，

一般 重新启动IDE即可。

后端代码的修改,一些注解要注释掉,否则前端做一些而写POST请求是找不到

 

1.3前端代码修改

 

一般可以全局配置后端的地址,便于修改

 

前端设置Credentials的方式:

axios.defaults.withCredentials = true;  //设置cross跨域 并设置访问权限 允许跨域携带cookie信息

或者Ajax

 

1.4部署方式

前端开发打包依赖webpack,运行npm run build命令,会在dist目录打包生成资源文件,这是要部署的资源,在项目的config的index.js中要修改一些地方

 

将打包生成dist目录下的资源放到IIS

 

值得注意IIS单独部署时候,记住ip要在后端项目记得配置再发布,当后端项目发布完成后,能正常访问,这样就能完成对API的请求了