Vue全家桶仿小米商城实战系列(七)

465 阅读1分钟

前端跨域解决方案

跨域是浏览器为了安全而做出的限制策略,属于前端特有的,防止其他人随意篡改、抓取数据

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

  • CORS跨域 服务器端设置,前端直接调用

说明:后台允许前端某个站点进行访问

先在控制台安装插件:npm i axios --save-dev
然后打开App.vue
导入:
import axios from 'axios'
设置
 mounted(){
    let url = ""//可以指定固定网站调用
    axios.get(url).then(()=>{})
  }

显示:

image.png

  • JSONP跨域(是js脚本请求,要安装jsonp插件)

前端适配,后端配合

说明:前后端同时改造

npm i jsonp --save-dev
import jsonp from 'jsonp'

 mounted(){
    let url = ""//可以指定固定网站调用
    jsonp(url,()=>{})
  }
  • 代理跨域 接口代理,通过修改nginx服务器来实现

说明:前端修改,后台不动

先创建vue.config.js
App.vue
mounted(){
    let url = "/api/activity/servicetime"//可以指定固定网站调用
    //axios.get(url).then(()=>{})
    jsonp(url,(err,res)=>{
      let result = res;
      this.data = result;
    })
  }
vue.config.js:
module.exports = {
    devServer:{
        host:'localhost',
        port:8080,
        proxy:{
            '/api':{
                target:'https://www.imooc.com',
                changeOrigin:true,
                pathRewrite:{
                    'api':''
                }
            }
        }

    }
}

需求梳理

熟悉文档,查看原型,读懂需求
了解前端设计稿,设计前端业务架构
了解后端接口文档,制定相关对接规范
协调资源
搭建前端架构