前言:
什么是前端跨域?
跨域是浏览器为了安全做出的限制机制
策略:同域名 同端口 同协议

怎么解决前端跨域?
cors跨域
json跨域
代理跨域

1.axios组件来解决跨域(XHR请求)

cnpm install axios --save-dev #保存到配置文件,写入到开发环境

语法:

import axios from 'axios'
mounted(){
   let url = "xxx.xx.com"
   axios.get(url)
}

2.jsonp解决跨域(不是XHR请求,是js参数)

npm install jsonp --save-dev #安装

jsonp语法:

<script>
import jsonp from 'jsonp'
export default {
  mounted(){
    let url = "https://coding.imooc.com/class/"
    jsonp(url,(参数)(错误,返回)=>{
      
    })
  }
}
</script>

接口代理跨域:
接口带来主要是nginx代理我们去访问后端,但是我们这里没有nginx服务器,所以用vue server代替.
先创建vue server的配置文件,vue,config.js(在下面的根目录)

module.exports = {
    devServer:{
        host:"localhost",
        port:"80",
        proxy:{
            '/api':{
                target:"www.baidu.com", //拦截上访/api代理到www.baidu.com
                chagenOrigin:false, 

            }
        }
    }
}

重启server(命令:npm run serve)

代理这块有点绕
示例:

module.exports = {
    devServer:{
        host:"localhost",
        port:"80",
        proxy:{
            '/index':{  #截取前端路由只要路由中包含/index就会转发到后端http://127.0.0.1:8000/index并加上
                target:"http://127.0.0.1:8000", //拦截上访/api代理到www.baidu.com
                chagenOrigin:false, 
            }
        }
    }
}

出现这个问题主要是后端路由不严谨没有加正则强制_UE0NKJQ~E6}5YQ1MRV@QBB.png
如果正则之后前端就需要http://127.0.0.1/index/这样访问不然是访问不到后端的

总结:
前端跨域是必须要会的我们可以采用jsonp和代理跨域,代理一般选择nginx反向代理,axios不推荐使用它的跨域场景还是比较少的,推荐用jsonp+代理这样基本所有的跨域都可以解决

最后修改:2021 年 03 月 21 日 07 : 02 PM
感谢您的,打赏!