前话
对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。
方法1 JSONP
第一个解决方案就是jsonp,并且以前处理跨域问题基本也是这么处理。
在前端写一个类似于Ajax的异步请求,解析回调函数返回的结果参数,Ajax直接请求普通文件存在跨域无权限访问的问题,不管是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准,但是凡是拥有”src” 这个属性的标签都拥有跨域的能力,如<\script>、<\img>、<\iframe>。
( ajax和jsonp这两种技术在调用方式上”看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加。
出于安全考虑,浏览器会限制脚本中发起的跨站请求。使用 XMLHttpRequest 对象发起 HTTP 请求就必须遵守同源策略(same-origin policy))*
如下示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
var html = '<ul>';
for(var i = 0; i < data.length; i++)
{