jsonp解决跨域

# 1. 什么是跨域

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

跨域就是指浏览器不允许当前页面的所在源，去请求另一个源的数据

在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的，通过在devServer中的proxy来配置跨域的前缀

跨域的报错


# 2. 用vue来解决跨域

首先在vue脚手架下创建vue.config.js文件插入代码

```

// 进行修改默认的webpack配置

module.exports = {

    devServer: {  //开发环境的服务器配置

        // 是否自动弹出浏览器，默认false

        open: false,

        // 修改默认端口，默认8080

        // port: 9090,

        proxy: {  //进行代理转发

            '/api': {

                // 转发的网址

                target: "http://m.sirfang.com/api",

                // 是否开启本地代理 默认true

                changeOrigin: true,

                // 重要点

                pathRewrite: {

                    '^/api': ''

                }

            }

        }

    }

}

```

### jquery中jsonp也可以解决跨域

Jsonp是解决跨域的一种解决方案，实现原理主要是利用动态创建 script 标签，设置src属性，页面要提前定义好callback。后端会返回回调函数执行，并包裹参数callback(data)callback 中的参数就是 json

### 什么是jsonp，jsonp的原理

ajax 请求受同源策略影响，不允许进行请求，我们利用 script 标签的 src 属性不受同源策略的约束，利用这个特性jsonp需要以下步骤：

1. 动态创建<script></script>(document.createElement('script'))

2. 设置src 属性，(src中要包含参数callback=fn)进行跨域请求

3. 将 <script></script>添加到页面中执行 （body.appendChild('script')）

4. 页面要提前定义好callback。

5. 后端会返回回调函数执行并包裹参数callback(data)

备注：服务端不再返回JSON格式的数据，而是返回回调函数包裹数据（fn({name:'tom', age:18}），在src中进行了调用，这样实现了跨域。