signed

QiShunwang

“诚信为本、客户至上”

Vue实现跨域问题

2021/6/24 16:56:15   来源:

一、什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url的不同即为跨域。

当前页面url被请求页面url是否跨域原因
http://www.test.com/http://www.test.com/index.html同源(协议、域名、端口号相同)
http://www.test.com/https://www.test.com/index.html跨域协议不同(http/https)
http://www.test.com/http://www.baidu.com/跨域主域名不同(test/baidu)
http://www.test.com/http://blog.test.com/跨域子域名不同(www/blog)
http://www.test.com:8080/http://www.test.com:7001/跨域端口号不同(8080/7001)

在前后端分离项目中,前端地址是localhost:8080,后端地址是localhost:9000此时端口号不同,就产生跨域问题。

二、前端解决跨域的方法

一定要注意:不同的Vue脚手架,解决跨域的代码略有不同。

  • 2.1、基于Vue-cli2项目的解决方法

Vue-cli2即脚手架2。
通过 vue init webpack your-project-name 创建的项目,默认npm run dev启动项目
脚手架2创建的项目目录结构:
vue-cli2项目目录结构

在config中的index.js中的proxyTable{ }添加下面代码
在这里插入图片描述

'/api': {
        target: 'http://localhost:9000',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': ''//如果后端接口为'http://localhost:9000/user/',
         			 //前端调用时直接写'/api/user/'即可.
        }
      }

发起请求:

在这里插入图片描述

请求结果:

在这里插入图片描述

  • 2.2、基于Vue-cli3项目的解决办法

Vue cli3(即脚手架3)。
通过vue create your-project-name创建的项目,默认通过npm run serve启动。
脚手架3项目目录结构:
在这里插入图片描述

在vue项目根目录下找到vue.config.js文件(如果没有该文件则自己创建),在proxy中设置跨域
在这里插入图片描述

 devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'http://131.132.67.111:8888/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changeOrigin: true,  //允许跨域
        pathRewrite: {
          /* 重写路径.当我们在浏览器中看到请求的地址为:http://localhost:8080/api/user 时
            实际上访问的地址是:http://131.132.67.111:8888/user,因为重写了 /api 为 /
           */
          '^/api': '' 
        }
      },
    }
  },