您的当前位置:首页正文

跨域问题配置

2024-04-28 来源:帮我找美食网

跨域了没有数据。访问不了接口。

在vue.config.js文件里面加上如下代码:(这个是最简单的配置 

为什么会跨域

解决跨域

vue.config.js 设置代理跨域

配置后,需要重启服务器!!!

request.js 使用axios发送请求,配置baseURL

proxy代理的使用(解决跨域,配置多个代理)

一、什么是代理

字面意思就是类似中间商,开启代理,原理就是在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据,

利用服务器与服务器间,交互,不会有跨域问题,也是完全只靠前端自己独立解决跨域的方式

以 cli3示例

我现在需要在本地请求接口

//  cli3     vue.config.js
  devServer: {
    proxy:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求							的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写匹配的字段,如果不需要在请求路径上,重写为""
              "^/api": "/api"
          }
      },
   
  },
  }




  //cli2的放在config文件夹中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求							的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写请求路径上匹配到的字段,如果不需要在请求路径上,重写为""
              "^/api": "/api",
              "demo.json": "index.json"
          }
      },
  },
  }

 在创建axios的时候,beseURL这样配置

const ajax = axios.create({
    baseURL:"/api",
    timeout: 6000,//请求超时时间
})

 创建的请求

export function getData() { //get
  return request({
    url: '/search/home',
    method: 'GET'
  })
}

这样匹配到这个字段时就会代理到target去,将target添加到/前面,在根据pathRewrite,然后是你请求的ajax
意思大概就是,你的beseURL加上你请求的url满足proxy的匹配,那你的代理就是没问题的
同时处理的也是匹配到的部分。
这样虚拟服务器请求的的就是

http://www.xiongmaoyouxuan.com/api/search/home

 

 

 

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top