一个前端关于跨域的问题

最新推荐文章于 2024-06-13 02:48:16 发布

码农小能手

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量302

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Guoxuzzz/article/details/126659004

版权

写项目遇到一个跨域的问题，以前也碰到过，但是今天有了一点更好的理解。长话短说，直接上干货

axios({
        url: 'http://cooacloudtest.sugon.com/getPsn?extension',  // 想要请求的接口
        method: "post",
        headers: {
          "Cache-Control": "no-cache",
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(obj)
      }).then(res => {
        this.user = res.data
      })

url里就是我想请求的地址（http://cooacloudtest.sugon.com/getPsn?extension）就是这个。但是会跨域错误CORS，请求不了

解决方式用代理非常简单

1.在目录vue.config.js（一般就是最下面的一个）里写下面的代码，其中target里写的就是你要请求的那个地址

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://cooacloudtest.sugon.com/getPsn?extension',//这里填入你要请求的接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }
  }

2.在这里引入代码配置完成之后回到你的axios里把url里的网址替换成’/api’ (这里的这个)

axios({
        url: '/api',  // 用api替换网址
        method: "post",
        headers: {
          "Cache-Control": "no-cache",
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(obj)
      }).then(res => {
        this.user = res.data
      })