前端跨域解决方案
跨域是浏览器为了安全而做出的限制策略,属于前端特有的,防止其他人随意篡改、抓取数据
浏览器请求必须遵循同源策略:同域名、同端口、同协议
- CORS跨域 服务器端设置,前端直接调用
说明:后台允许前端某个站点进行访问
先在控制台安装插件:npm i axios --save-dev
然后打开App.vue
导入:
import axios from 'axios'
设置
mounted(){
let url = ""//可以指定固定网站调用
axios.get(url).then(()=>{})
}
显示:
- 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':''
}
}
}
}
}
需求梳理
熟悉文档,查看原型,读懂需求
了解前端设计稿,设计前端业务架构
了解后端接口文档,制定相关对接规范
协调资源
搭建前端架构