跨域的解决方式

一、 JSONP操作跨域

1. 原理：利用 <script> 标签没有跨域限制（可以加载其它域选下的js），网页可以得到从其他来源动态产生的JSON数据。
2. 使用JSONP：

   • 首先，网页动态插入<script>元素，由它向跨源网址发出请求。

     
     
     

     上面代码通过添加<script>元素，向服务器127.0.0.1：8080发出请求。
     注意，该请求的查询字符串有一个 callback 参数，用来指定回调函数名字，这对于JSONP是必须的。

   • 服务器收到这个请求后，会将数据放在回调函数位置返回。
   • 由于<script>元素请求的脚本，直接作为代码运行，这时浏览器只要定义了appendHtml函数，该函数就会立即调用，作为参数的JSON数据被视为Javascript对象。

3.实例演示：

• 后端部分要做的：
  //server.js

  
  

• 前端要做的：shownews这个前端交互是url：localhost:8080/index.html或127.0.0.1：8080/index.html
  //index.html

  
  

//使用script标签来定义一个jsonp的数据

二、CORS操作跨域

1. CORS全称是跨域资源共享（Cross-Origin Resource Sharing），是一种ajax跨域请求资源的方式
2. 原理：当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头（即协商处理）：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin；浏览器判断该响应头中是否包含Origin的值，如果有，则浏览器会处理响应，我们就可以拿到响应数据，如果不包含，浏览器直接夺回，这是时我们就无法拿到响应数据。所以CORS的表象是让你觉得它与同源的ajax没什么区别。
3. 实例演示：

• 前端：设置一个Ajax请求

  
  
• 后端：设置所需数据参数和同源策略