在部署一个原声的前端项目的时候,请求该服务器后端接口时发现出现了CORS跨域的问题,但是服务端已经做了同源策略的兼容,常见问题,遂记录。

报错信息:

XMLHttpRequest cannot load http://xxxx.cn. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. 

错误分析:

  1. 这是由于ajax的跨域访问引起的
  2. ajax没有经过服务器而直接访问请求,使用了file协议

通俗的说,就是没有在服务器环境中运行含有ajax方法的页面,而是类似于浏览器直接打开的形式运行该页面,这样子并没有使用http协议,而是直接使用了file协议。

本地页面请求远程服务端时,默认使用http://协议,但是本地页面中的ajax方法请求本地时,默认的是file:///协议,而file协议是不予许跨域请求的,所以在请求时,请求的URL格式类似于:

http://xxxx.cn/xxxxx

在请求的url前一定要加上http://

关于在JS中AJAX导致跨域问题的解决的更多相关文章

  1. jquery中ajax处理跨域的三大方式

    一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: ? 1 2 ...

  2. 原生JS实现Ajax的跨域请求

    原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:“同源策略”,你就知道了: 同源策略限制从一个源加载的文档或脚本如 ...

  3. ajax POST跨域请求完美解决

    方式: js前端请求: function getOcrInfo(imageData){$.ajax({   url: 'http://localhost:8080/LSWS/ws/ocr/getWeb ...

  4. js,java,ajax实现跨域访问及其原理

    http://blog.csdn.net/saytime/article/details/51540876 这篇文章对跨域访问做了较为细致得分析,我这里做下简单总结 1.实现跨域访问原理: 浏览器由于 ...

  5. AJAX及其跨域的主要解决方法

    AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同 ...

  6. ajax本地跨域请求以及解决方法

    什么是跨域?   我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...

  7. WebApp开发:ajax请求跨域问题的解决

    服务端:PHP 客户端:Andorid, HTML5, jQuery, ajax 现象:本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里,结果总是错误,后来想到可能是跨域问题,所以查 ...

  8. jquery ajax 无法跨域调用的解决办法

    今天要用到jquery ajax 跨域调用,但是ajax是禁止跨域调用的,所以只能先在php文件使用函数取得跨域的值,然后用ajax调用本地php文件.

  9. Vue 项目中遇到的跨域问题及解决方法

    原文:https://www.jb51.net/article/137278.htm 问题描述 前端 vue 框架,跨域问题后台加这段代码 header("Access-Control-Al ...

随机推荐

  1. gsm

    libosmocore Osmocom-BB wireshark 拦截一个短信内容

  2. Oracle学习笔记(十二)

    十三.存储过程和存储函数1.掌握存储过程(相当于建立一个函数或者方法体,然后通过外部对其调用) 指存储在数据库中供所有程序调用的子程序叫做存储过程或存储函数. 相同点: 完成特定功能的程序 区别: 是 ...

  3. Flash的不同位宽与CPU地址线的接线问题?

    一般Flash都有8.16.32等这些不同的位宽,当然说白了就是Flash的数据线位数. 在Flash与CPU的地址线的连接问题时:不同位宽的有不同的连接方法: 一般是:位宽为8时CPU的ADDR0与 ...

  4. 续安装好composer和workerman之后;TP5运行workerman的操作

    TP5想要实现时时通讯:首先先安装好composer和workerman,我之前有写一篇安装的方法,在cmd里面安装:tp5手册上面有写cmd命令的代码:接下来是安装好后如何运行的: 首先在项目中建立 ...

  5. swift 学习之UISegmentedControl

    //创建分段控件的标题         let titileArray:[String] = ["点评", "哪里逃"]         let segment ...

  6. Google Tango Java SDK开发:Configure and Connect 配置和连接

    Configure and Connect 配置和连接 Note: This section assumes you are familiar with the Android Activity Li ...

  7. Appium之打开应用时提示框处理

    当打开一个应用时,会有一个无关紧要的提示框,如果要继续操作,需要先关闭提示框,如下图(如新用户福利提示): 此时,如果你直接用Appium inspector或者Android uiautomator ...

  8. 简述负载均衡和CDN技术

    曾经见到知乎上有人问“为什么像facebook这类的网站需要上千个工程师维护?”,下面的回答多种多样,但总结起来就是:一个高性能的web系统需要从无数个角度去考虑他,大到服务器的布局,小到软件中某个文 ...

  9. 推荐两款国人开发的html前段框架

    1.http://www.h-ui.net/  H-ui前端框架官方网站 2.http://www.builive.com/  BUI是基于JQuery的富客户端UI框架

  10. winform 版本号比较

    Version now_v = new Version(strval); Version load_v = new Version(model.version.ToString()); if (now ...