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:\智慧水务-洋湖\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的请求了
来源:https://blog.csdn.net/qq_25447009/article/details/102746969