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

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

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

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

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

(一) 关于跨域问题

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

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

会出现这个

解决办法:找到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>

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

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

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

解决办法

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

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

会发现,多了一个option请求

 option请求又叫嗅探请求

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

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

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

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

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

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

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

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

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

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

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)的更多相关文章

  1. Aspnet Mvc 前后端分离项目手记(二)关于token认证

    在前后端分离的项目中,首先我们要解决的问题就是身份认证 以往的时候,我们使用cookie+session,或者只用cookie来保持会话. 一,先来复习一下cookie和session 首先我们来复习 ...

  2. Aspnet Mvc 前后端分离项目手记(三)关于restful 风格Url设计

    RESTful 不是新东西,简单理解它的核心思想就是最大程度的利用http协议的一些特点,比如uri,比如请求动词,在前后端分离的项目中会有大大的好处 ,好的设计的url简单明了,胜过详细的说明文档. ...

  3. Aspnet Mvc 前后端分离项目手记(四)vue项目的搭建(一)(iview)

    一项目创建 1,搭建vue-cli脚手架(依赖npm) 没有安装npm的同学,请先使用npm install -g vue-cli ,然后再进行这一步 安装的过程中有几项 ? Project name ...

  4. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  5. nginx 前后端分离 代理转发,解决跨域问题

    场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...

  6. 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)

    原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...

  7. springMVC前后端分离开发模式下支持跨域请求

    1.web.xml中添加cors规则支持(请修改包名) <filter> <filter-name>cors</filter-name> <filter-cl ...

  8. 前后端分离,使用nginx解决跨域问题

    前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码 ...

  9. 在前后端分离项目中使用SpringBoot集成Shiro

    前言 这次在处理一个小项目时用到了前后端分离,服务端使用springboot2.x.权限验证使用了Shiro.前后端分离首先需要解决的是跨域问题,POST接口跨域时会预发送一个OPTIONS请求,浏览 ...

随机推荐

  1. Redis系列八:redis主从复制和哨兵

    一.Redis主从复制 主从复制:主节点负责写数据,从节点负责读数据,主节点定期把数据同步到从节点保证数据的一致性 1. 主从复制的相关操作 a,配置主从复制方式一.新增redis6380.conf, ...

  2. python之路day01--变量

    一.变量 变量就是将一些运算的中间结果暂存到内存中,以便后续代码块调用. 规范: 1.必须由数字.字母.下划线任意组合,且不能数字开头. 2.不能是python中的关键字.如:‘print’ 'and ...

  3. java正则表达式取出匹配字符串

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class RegexMatches { public s ...

  4. Vue(小案例_vue+axios仿手机app)_图文列表实现

    一.前言 1.导航滑动实现   2.渲染列表信息时让一开始加载的时候就请求数据 3.根据路由的改变,加载图文的改变(实现用户访问网站时可能执行的三个操作) 二.主要内容 1.导航滑动实现: (1)演示 ...

  5. elk插件以及分词器安装

    ElasticSearch-Head 安装配置因为安装 ElasticSearch-Head 需要使用到 npm 包管理器,所以需要我们提前安装好 NodeJS ,安装 NodeJS 的方法可以参考: ...

  6. mybatis的if判断integer

    昨天在使用mybatis的if判断integer时遇见一个小问题: <if test="isChoose != null and isChoose != '' and isChoose ...

  7. windows上编译zlib-1.2.8

    MSVC编译 使用VS(x86)命令行工具进入到zlib根目录,执行 nmake -f win32/Makefile.msc ,在根目录下生成:zlib.lib(静态库)  zdll.lib(动态库的 ...

  8. js深拷贝

    // 判断是否为对象 function isObject(o) { return (typeof o === 'object' || typeof o === 'function') &&am ...

  9. 如何实现Python调用C代码--python与C之间如何通信(swig)

    转载: https://www.zhihu.com/question/23003213 1. C代码如何调用Python 1.1 test #include <Python.h> int ...

  10. Spark Java API 之 CountVectorizer

    Spark Java API 之 CountVectorizer 由于在Spark中文本处理与分析的一些机器学习算法的输入并不是文本数据,而是数值型向量.因此,需要进行转换.而将文本数据转换成数值型的 ...