vue 跨域

跨域是浏览器为了安全而做出的限制策略

浏览器请求必须遵循同源策略：同协议、同域名、同端口

三大解决跨域方法

1. CORS跨域：服务端设置，前端直接调用，后台允许前端某个站点进行访问 

   1.引入axios
   npm i axios --save-dev
   
   2.请求
   import axios from 'axios'
   axios.get(url).then( res => {
       console.log(res)
   })

    

2. JSONP跨域：前端适配，后台配合，前后台同时改造

   jsonp发起的不是请求，是一段js代码
   
   1.安装jsonp插件
   npm i jsonp --save-dev
   
   2.使用jsonp进行跨域
   import jsonp from 'jsonp'
   let url = 'XXX'
   jsonp(url,options,(err,res) => {
       console.log(res)
   })

    

3. 代理跨域:接口代理，通过修改nginx服务器配置来实现，前端修改，后台不动

   1.创建vue.config.js ->webpack配置表 传送给nodejs服务器，实现服务的设置，语法遵循commonjs规范
   module.exports = {
       devServer: {
           host: "localhost",
           port: 8080,
           proxy: {
               '/iclient': {
                   target: "",// 目标,代理到指定地址
                   changeOrigin: true, // 是否将主机头的原点更改为目标的url地址
                   pathRewrite: { // 转发地址
                       '/iclient': '' // 将标识清空
                   }
                }
           }
       }
   }
   
   用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地.
   
   '/iclient': {}, 就是告诉node, 我接口只要是'/iclient'开头的才用代理.所以你的接口就要这么写 /iclient/xx/xx. 最后代理的路径就是 http://xxx.xx.com/iclient/xx/xx.
   
   可是不对啊, 我正确的接口路径里面没有/iclient啊. 所以就需要 pathRewrite,用''^/iclient'':'', 把'/iclient'去掉, 这样既能有正确标识, 又能在请求接口的时候去掉iclient.