背景

后端使用Nginx并更改本地host文件,起本地服务。将aaa.bbbb.com代理至本地IP地址(10.26.36.156)。
使用$.ajax调用后端restful接口,要求content-type为application/json格式,并要求在request headers里加一些内容。

前端代码:

    $.ajax({
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'user-id':'123',
'ghf-id': '456'
},
url: 'https://10.26.36.156/aaa/vds/dsg',
type: 'PATCH',
data: JSON.stringify(data),
dataType: 'json',
success: function (response) { },
error: function (msg) { }
})

现象

后端使用postman 可以访问成功
浏览器network抓请求,结果如下,但是代码并没有触发后端的代码断点....
这是为什么呢?

原因

因为host文件的配置,骗过了浏览器,进行了一次options请求,但是对于js引擎来说,这里的ip地址与浏览器的域名不同,所以出现了跨域,因此设置到了Access-Control-Request-Headers里面。

解决方案

方案一:
不走IP(不写绝对路径),而是相对路径
方案二:
将IP地址加入白名单(node js里面是如此,其他语音应该也有相应的)。
借用凝雨关于跨域踩坑经验总结

关于跨域踩的坑,浏览器 status code为200,但实际上是跨域了的更多相关文章

  1. Ajax交互,浏览器接收不到服务器的Json数据(跨域问题)

    该问题的情景如下: 问题描述 Ajax的请求代码放在一台机器上,而服务器的java 路由程序放在另一个机子上,所以Ajax的url填写的是带"http://"  的地址,而不是相对 ...

  2. Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405

    问题 公司项目H5调用接口遇到Response for preflight has invalid HTTP status code 405这样的错误,是使用PUT方式提交请求接口.Content-T ...

  3. Chrome浏览器扩展开发系列之十五:跨域访问的XMLHttpRequest对象

    XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...

  4. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  5. 转 Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405

    转自:http://www.cnblogs.com/SilenceTom/p/6697484.html 调用接口遇到Response for preflight has invalid HTTP st ...

  6. 从零开始学 Java - Spring 支持 CORS 请求踩的坑

    谁没掉进过几个大坑 记得好久之前,总能时不时在某个地方看到一些标语,往往都是上面一个伟人的头像,然后不管是不是他说的话,下面总是有看起来很政治正确且没卵用的屁话,我活到目前为止,最令我笑的肚子痛得是下 ...

  7. 跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

    在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...

  8. 跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享

    在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...

  9. Asp.Net Core中使用Swagger,你不得不踩的坑

    很久不来写blog了,换了新工作后很累,很忙.每天常态化加班到21点,偶尔还会到凌晨,加班很累,但这段时间,也确实学到了不少知识,今天这篇文章和大家分享一下:Asp.Net Core中使用Swagge ...

随机推荐

  1. 关于连接池和DBUtils

    1.关于数据库连接池 连接池就是创建和管理一个连接缓冲池的技术,这些连接好被任意线程所使用,数据库连接池负责分配和管理.释放数据库连接,总而言之数据库连接池就是提高对数据库的操作性能. 数据库连接池: ...

  2. 用了 10 多年的 Tomcat 居然有bug !

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 为了解决分布式链路追踪的问题,我们引入了实现OpenTracing的Jaeger来实现.然后我们为SpringBoot框架写 ...

  3. Luogu P5470 [NOI2019]序列

    题目 可以直接贪心,但是用模拟费用流推的话会更轻松. 首先有一个显然的建图方式: \(S\)到\(0\)流量为\(k\),费用为\(0\). \(0\)到\(a_i\)流量为\(1\),费用为\(-a ...

  4. Python 入门之 Python三大器 之 生成器

    Python 入门之 Python三大器 之 生成器 1.生成器 (1)什么是生成器? 核心:生成器的本质就是一个迭代器 迭代器是Python自带的 生成器程序员自己写的一种迭代器 def func( ...

  5. SCUT - 485 - 质因数计数 - 原根

    https://scut.online/p/485 给定a和n,求有多少个质数p,满足n是使得a^n=1 mod p成立的最小正整数. 翻译:求有多少个质数p,使得a模p的阶delta_m(a)是n ...

  6. CSS中的伪类和为伪元素

    伪类: 伪元素:

  7. 前端开发HTML&css入门——一些其他常用的文本标签

    em标签和strong标签 i标签和b标签 small标签 cite标签 q标签和blockquote标签 em主要表示语气上的强调,em在浏览器中默认使用斜体显示strong表示强调的内容,比em更 ...

  8. switch使用--查询水果价格案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Docker学习笔记--传送门(持续更新)

    1.ubuntu下安装docker:  https://www.cnblogs.com/salmonLeeson/p/11609699.html 2.为docker配置国内镜像加速器:https:// ...

  10. C#基础知识之Dynamic类型

    Dynamic类型是C#4.0中引入的新类型,它允许其操作掠过编译器类型检查,而在运行时处理. 编程语言有时可以划分为静态类型化语言和动态类型化语言.C#和Java经常被认为是静态化类型的语言,而Py ...