作为一个前端怎么解决跨域问题?

有没有刷刷刷做完一个小功能, 啥都写对了, 就在检查axios结果的时候, 发现控制台爆红了, 又发现network选项卡该请求带cross-origin的问题? 没错, 那就是跨域问题, 源于浏览器的同源策略, 当你发ajax时, url和请求地址不同源(协议, 域名, 端口)造成的. 这个时候你就可以找你的后端同学友好沟通了.

1. 假如你赢了, 那就由后端在服务端解决这个问题, 你啥都不用做.

2. 假如你力气没他大, , , 那你就自己写配置呗, 谁让前端是最苦逼的呢. 

①用JSONP方式去发请求

②在请求头添加允许跨域 

        res.setHeader("Access-Control-Allow-Origin", "*");

③假如你使用的vue-cli , 那么恭喜你 ,vue cli自带的一个代理服务器davServer

        在vue.config.js中, module exports = {  davServer:{  proxy:{ xxx }  }  }

你要做的就是在xxx中添加一个属性: 比如你遇到有跨域的问题接口, 他们都带有前缀/api, 那么你就这样做:

devServer: {
    // 配置代理
    proxy: {
      '/api': {
        target: '跨域接口基地址'
      }
    }
  },

还有重要的一步, 把你的request模块中的基地址删掉 确保你的target是你的接口服务器前缀,不然会重复

这里的意思就是遇到请求path带/api的, 就由davServer转发到target服务器上, 并自带path

然后重启下项目, 打开是不是发现正常获取到数据了