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': ''
                }
            }
        }

    }
}

什么是跨域

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

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

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

跨域的报错提示

 只要是看到这个报错就是跨域，跨域就是指浏览器不允许当前页面的所在源，去请求另一个源的数据被称为跨域

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中进行了调用，这样实现了跨域。

解决跨域的方法不止这两种，还有其他方法

cors是一种跨域解决方案，它使用额外的 HTTP 头来告诉浏览器让运行在一个origin 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。