Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)

摘要:
前言:最近的项目使用前端和后端分离的模式来记录一些知识点。(1) 跨域问题的全称是浏览器同源策略。主要是为了防止一些安全问题。大多数时候,它被携带在请求头中。将显示此结果。这意味着请求标头中不允许使用令牌。解决方案是web.config。请将其添加到测试中。您可以看到,问题解决后,将没有限制令牌,但您会发现另一个问题。一个请求如何变成两个?

 前言,最近的项目使用前后端分离的模式,记录其中一些知识点。经过这个项目,也对前后端分离有了更多理解,尤其是在技术之外的方面。

      越来越多的项目采用前后端分离的原因,有两点:

     1,技术方面的原因:移动端的越来越重要,一个项目可能要做好几种版本,手机端,app,pc...,,前端完全负责页面展示后端只负责统一的api; react,vue,ng一些优秀框架的产生,解决了很多前端开发者的痛点;还有一些随之而来的成熟框架elementui,iview等等。

      2 ,非技术方面的原因    能做全栈的开发者相对还是比较少的,人们期望这种新的模式能够让责任分离,让前后端能够专注于做擅长的事情;还有就是,人们对新技术总是热情满满 ,乐于尝试。

         当然也带来很多问题,比如前后端的联调和沟通,一些细节的划分。个人觉得,在开发效率上来讲,并没有明显的提高,当然了技术没有最好最坏,只有最合适

(一) 关于跨域问题

跨域的全名叫浏览器同源策略。主要是为的防止一些安全性问题。具体的介绍跨域的文章有太多,这里就不再重复了。
     注意,只有在浏览器中才会产生跨域,使用后端代码或者别的代理方式请求时,是不存在跨域的。
      常见的解决办法有jsonp,或者通过iframe子窗体,使用代理。 今天我们要说的是最主流的解决办法:使用cors

在 localhost:52818的页面中请求 localhost:8080的接口

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第1张

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第2张

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第3张

会出现这个

解决办法:找到web.config

<system.webServer>节点下面加入

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

</customHeaders>
</httpProtocol>

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第4张

再次请求,我们发现没有跨域的问题了

问题还没有完,我们经常会在请求时带上身份认证的东西,比如说token。很多时候是带在请求头里面的,像这样

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第5张

结果会出现这个,他的意思是token不允许出现在请求头里面

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第6张

解决办法

 还是web.config,加上这个就行

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第7张

 测试可以看到,问题解决了,也不会出现限制token了,但是会发现另一个问题,一个请求怎么变成两个了?

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第8张

会发现,多了一个option请求

 option请求又叫嗅探请求

 产生的条件有两个,一,跨域。二请求头header中有自定义的,超出默认范围的字段,比如说刚才我们使用的token

下面是默认的请求头的范围

 Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第9张

解决办法发:options请求时无法避免的。但是我们可以让他缓存在浏览器,尽量产生更少的options请求

 在刚才的配置中再加上 <add name="Access-Control-Max-Age" value="86400" /> ,意思是让他缓存在浏览器86400秒

 Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第10张

再次试验,可以发现第一次还存在options请求,后面就没了

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第11张

 相同的,后端也需要对options请求做处理:使用httpModule拦截options请求,并返回空字符串

 Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第12张

 添加完httpModule后一定要在web.config里面配置,才能注册到IIS

配置方法,找到Module节点,加入 <add name="MOptions" type="Site1.Filter.MOptions, Site1" /> ,也就是<add name="类名" type="类全名, 命名空间名" /> ,

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)第13张

这样,跨域问题就算完成了,

下一篇将会聊一下前后端分离时的token认证

免责声明:文章转载自《Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Tomcat系列(3)——Tomcat 组件及架构核心部分 4类主要组件(顶层,连接器,容器,嵌套)[Tomcat/Java EE/Linux]Tomcat启动异常:StandardServer.await: create[localhost:8005]: java.net.BindException: 无法指定被请求的地址下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

开源项目【JEECG BOOT 低代码开发平台(前后端分离版本)】

项目介绍: Java Low Code Platform for Enterprise web applications JeecgBoot 是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT,支持微服务。强大的代码生成器...

RuoYi(若依)前后端分离版本,windows下部署(nginx)

摘自:https://blog.csdn.net/yueyekkx/article/details/105505490 上一篇用了tomcat部署(https://blog.csdn.net/yueyekkx/article/details/105491363),还是觉得nginx是王道话不多说开始:还是windows下部署:nginx jar包 前端:1...

JAVA框架-前后端分离(跨域和JWT)

跨域 当我们在做前后端分离项目的时候,Tomcat往往并不是将前端页面和后端程序统一部署的,一般我们会有一个单独的部署静态html的服务器,那么此时前端的服务器如果想要访问后端的服务器时候,浏览器默认是会拦截这个操作的,因为浏览器有一种叫做同源策略(Same origin policy)的安全机制。 同源策略(Same origin policy)是一种约...

开源netcore前后端分离,前端服务端渲染方案

SPA单页面应用容器开源地址:https://github.com/yuzd/Spa 功能介绍 前端应用开发完后打包后自助上传部署发布 配合服务端脚本(javascript)实现服务端业务逻辑编写渲染SSR功能 可以快速回滚到上一个版本 可以设置环境变量供SSR功能使用 服务端脚本提供执行日志 redis db三大组件打造强大的基于js的ssr服务端...

前后端分离结构中使用shiro进行权限控制

前阵子在前后端分离项目中集成shiro项目,折腾了一下子,参考了网上一些博客,发现大多都还是之前传统的模式,并不适用于前后端分离结构。今天抽空整理了下demo,方便以后使用以及后来人参考。 一、springboot中集成shiro框架 关于shior框架的介绍可以参考这篇,需要引入相关jar如下: <!--shiro核心jar--> <...

浅谈前后端分离与实践 之 nodejs 中间层服务

一、背景 书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务。联调的时候,按照之前定义的开发规范进行数据联调便可以了。前后端的职能更加清晰: 后端 前端 提供数据 接收数据,返回数据 处理业务逻辑 处理渲染逻辑 Server-side...