业务场景:

前后端分离需要对接数据接口。

接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用。

问题:

前端ajax请求后端接口出现跨域问题,如下图。

翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端。

什么是Access-Control-Allow-Origin?

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。

浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢?

  • 请求协议http,https的不同
  • domain的不同
  • 端口port的不同

其实说简单点,跨域,指的就是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

同源是指:协议相同,域名相同,端口相同。三者同时成立才能叫同源。

浏览器的同源策略从它诞生的那一刻就出现了,具体是指从域名A下的一个页面(一般是通过ajax请求)获取域名B下的一个资源,是不被浏览器允许的。

跨域资源共享(CORS)是浏览器提供的一种跨域协商机制,让前后端协商是否可以发出跨域请求。 CORS添加了若干Access-controll-request-xxx 的头,给客户端声明自己的源、要使用的头部、用使用的请求方法;添加了若干Access-Controll-Allow-xxx的头,给服务端声明自己支持跨域的源、头部和方法。

 
URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不同域名 不允许

解决方案(从后端解决)

1.后台接口允许跨域请求

以Python Flask框架为例,有两种方法。
第一种第三方插件实现,只需要安装第三方插件就可以轻松地为所有接口添加响应头。
pip3 install flask-cors
from flask_cors import *

app = Flask(__name__)
# r'/*' 是通配符,让本服务器所有的URL 都允许跨域请求
CORS(app, resources=r'/*')

实际上就是为接口响应头添加了一个Access-Control-Allow-Origin并设置值*表示所有网站都可以请求。

第二种接口函数自定义添加属性。

res.headers['Access-Control-Allow-Origin'] = '*'
return res

为返回结果res属性headers设置Access-Control-Allow-Origin值为*。只对当前接口有效。

2.利用nginx反向代理

说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题。

一般来说可以用来做:静态页面的服务器、静态文件缓存服务器、网站反向代理、负载均衡服务器等等,而且实现这一切,基本只需要改改那万能的配置文件即可。

server {
listen 80;
server_name localhost;
      location / {
proxy_pass http://localhost:81;
proxy_redirect default;
} location /apis { #添加访问目录为/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
}

1.由配置信息可知,我们让nginx监听localhost的80端口,本地的81端口有都是经过localhost的80端口进行访问。

2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。

3.rewrite  ^/apis/(.*)$ /$1 break,代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。break代表匹配一个之后停止匹配。

总结一下,搭建一个nginx并把相应代码部署在服务器本机,由页面请求本域名的一个地址,转由nginx代理到目标服务器处理后返回结果给页面。这样就完美解决了跨域问题。

温馨提示

  • 如果您对本文有疑问,请在评论部分留言,我会在最短时间回复。
  • 如果本文帮助了您,也请评论关注,作为对我的一份鼓励。
  • 如果您感觉我写的有问题,也请批评指正,我会尽量修改。

Flask框架踩坑之ajax跨域请求的更多相关文章

  1. Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法

    如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable.  在实现 ...

  2. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  3. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  4. AJAX跨域请求json数据的实现方法

    这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...

  5. 第114天:Ajax跨域请求解决方法(二)

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

  6. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

  7. WebService跨域配置、Ajax跨域请求、附开发过程源码

    项目开发过程中需要和其他公司的数据对接,当时我们公司提供的是WebService,本地测试,都是好的,Ajax跨域请求,就报错,配置WebService过程中,花了不少功夫,入不少坑,不过最终问题还是 ...

  8. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  9. 解决ajax跨域请求 (总结)

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

随机推荐

  1. 在.net core wep项目中使用Session

    第1步:添加包引用 Install-Package Microsoft.AspNetCore.Session 第2步:添加代码启用Session 在项目Startup.cs文件的ConfigureSe ...

  2. Java 复制PPT幻灯片

    本篇文章将介绍通过java程序原样复制PPT幻灯片的方法.这里分两种情况来复制,即 在同一幻灯片文档中复制 在不同幻灯片文档间复制 使用工具:Free Spire.Presentation for J ...

  3. HDU4348To the moon主席树,区间修改

    题意: 一个长度为n的数组,4种操作 : (1)C l r d:区间[l,r]中的数都加1,同时当前的时间戳加1 . (2)Q l r:查询当前时间戳区间[l,r]中所有数的和 . (3)H l r ...

  4. hihocoder 1523 数组重排2+思维

    参考:http://blog.csdn.net/howardemily/article/details/74991367 题意:每次可以移动数组中的一个数到数组的最左边,问最少操作数,使得数列升序: ...

  5. HDU 4396More lumber is required 过至少K条边的最短路

    /* ** 题目要求过最少k条边的最短路 */ #include <iostream> #include <cstdio> #include <cstring> # ...

  6. HDU 6634 网络流最小割模型 启发式合并

    如果我们先手拿完所有苹果再去考虑花费的话. S -> 摄像头 -> 苹果 -> T 就相当于找到一个最小割使得S和T分开. ans = sum - flow. 然后对于这一个模型, ...

  7. lightoj 1125 - Divisible Group Sums (dp)

    Given a list of N numbers you will be allowed to choose any M of them. So you can choose in NCM ways ...

  8. codeforces E. Trains and Statistic(线段树+dp)

    题目链接:http://codeforces.com/contest/675/problem/E 题意:你可以从第 i 个车站到 [i + 1, a[i]] 之间的车站花一张票.p[i][j]表示从 ...

  9. MongoDb 快速翻页方法

    翻阅数据是MongoDB最常见的操作之一.一个典型的场景是需要在你的用户界面中显示你的结果.如果你是批量处理的数据,同样重要的是要让你的分页策略正确,以便你的数据处理可以规模化. 接下来,让我们通过一 ...

  10. Java常见面试题-1

    问: 1 面向对象的特征有哪些方面? 2 访问修饰符public,private,protected,以及不写(默认)时的区别? 3  String 是最基本的数据类型吗? 对象类型 基本类型 4  ...