跨域

跨域是怎么产生的

1.什么是跨域:

1.1.发起ajax请求的那个页面的地址 和 ajax接口地址 不在同一个域中

1.2.说人话:`不同源`的`ajax请求`

2.什么是同源

同源是指：`协议相同`，`域名相同`，`端口相同` 都相同。

3.不同源都有哪些

3.1请求响应双方url不同源: 双方url：发出请求所在的页面 与 所请求的资源的url
以下就是不同源的：从`http://127.0.0.1:5500/message_front/index.html` 请求`http://localhost:8080/getmsg`
网络中不同源的请求有很多

3.2请求类型是xhr请求:就是常说的ajax请求。不是请求图片资源，js文件,css文件等

3.3浏览器觉得不安全。跨域问题出现的基本原因是浏览器的同源策略。**同源策略**是一个重要的安全策略，
它限制一个[origin](https://developer.mozilla.org/zh-CN/docs/Glossary/Origin)的文档或者它加载的脚本如何能
与另一个源的资源进行交互。

注意，错误是发生在浏览器端的。请求是可以正常从浏览器发到服务器端，服务器也可以处理请求，只是返回到浏览器端时出错了。

解决跨域的方法

1.JSONP-基本实现

1.JSON with Padding:是一种借助于 `script`标签发送`跨域请求`的技巧。它本质并是ajax请求,所以没有跨域问题。
2.原理:
      2.1.script的src属性可以请求外部的js文件，这个请求不是ajax，它没有跨域问题。
      2.2.借助 `script` 标签的src请求服务端上的接口。`<script src="http://localhost:3000/get"`
      2.3.服务端的接口返回JavaScript 脚本，并附上要返回的数据。例如：`res.end("fn(数据)")`

3.实现步骤:
      3.1.补充script标签并设置它的src值为接口地址
      3.2.改造接口返回函数调用表达式，并传入数据
      3.3.在前端准备相应的函数

4.实操:
1.前端代码:
        <script>
             function fn(rs) {
                    console.log(rs);
                             }
         </script>
        <html>
            <script src="http://localhost:3000/get"></script>
        </html>
   *注意：- script标签中的src会指向一个后端接口的地址。由于script标签并不会导致跨域问题，所以这里的请求是可以
          正常发送和接收的。
       - 与我们之前理解的src指向某个具体的.js文件不同，我们只需要确保src所指向的地址的返回内容是js代码就行了，而不必要src直接指向某个.js文件。
       - 接口地址中返回的内容将会作为script标签的主体。
       
2.后端代码:
  *改造接口，返回函数调用表达式，并传入数据
  const express = require('express');
  const app = express();
  app.get('/get', (req, res) => {
  const data =  JSON.stringify({a:1,b:2})
  const fnStr = `fn(${data})`
  res.end(fnStr); // 返回字符串，内容是：函数调用语句
})

app.listen(3000, () => {
  console.log('你可以通过http://localhost:3000来访问...');
});
*注意:后端接口的返回值是一个特殊的字符串： 一个刻意拼写的js函数调用语句

关于跨域,我自己总结的一点资料

跨域

跨域是怎么产生的

解决跨域的方法

1.JSONP-基本实现

图示