vue.js解决域名问题与跨域问题

作者：优品建站      发布日期：2022-05-24      访问量：37

  我们在部署之后会发现Vue.js遇到js的经典问题：远程服务器地址不对，或者跨域问题。还是以本书中的“4.6发送http请求”（显示博客的列表）为例。
  真正的后台接口是http://siwei.me/interface/blogs/all，如图5-4所示。

图5-4 后台接口
一． 域名404问题
  （1）使用浏览器打开http://vue_demo.siwei.me/#/blogs页面，提示页面出错，如图5-5所示。

图5-5 页面出错
  （2）可以看到出错的原因是404，打开http://vue_demo.siwei.me/api/interface/blogs/all页面，如图5-6所示接口地址返回404错误。

图5-6 接口地址返回404错误
  （3）这个问题是由于源代码中访问/interface/blogs/all接口引起的。
  在文件src/components/BlogList.vue中的第41行，定义了远程访问的URL，如图5-7所示。

图5-7 代码中访问URL

this.$http.get('/api/interface/blogs/all')...
  这是因为在开发时，Vue.js会通过$npm run dev命令来运行“本地开发服务器”。这个服务器中有一个代理，可以把所有的以'/api'开头的请求，如：

localhost:8080/api/interface/blogs/all
转发到：

siwei.me/interface/blogs/all
“本地开发服务器”的配置如下：

proxyTable: {
  '/api': {
    target: 'http://siwei.me',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},
  所以，在开发环境下一切正常。但是在生产环境中发起请求时，就不存在“代理服务器”“开发服务器”（dev server）了，因此会出错。
二． 跨域问题
  跨域是js的经典问题。比如，有的读者在解决上面的问题时，会问：我们直接把图5-7中41行的：

this.$http.get('/api/interface/blogs/all')
改成：

this.$http.get('http://siwei.me/interface/blogs/all')
不就可以了吗？答案是否定的。
  动手试一下我们就会发现，如果vue_demo.siwei.me直接访问siwei.me域名下的资源，就会报错。因为它们是两个不同的域名。
代码如：

this.$http.get('http://siwei.me/api/interface/blogs/all')...
就会得到报错：

XMLHttpRequest cannot load http://siwei.me/api/interface/blogs/all.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://vue_demo.siwei.me' is therefore not allowed access.
如图5-8所示的跨域问题的报错信息。

图5-8 跨域问题的报错信息
三． 解决域名问题和跨域问题
  其实，上面提到的两个问题的根源都是一个，也就是说，解决办法是相同的。
  （1）在代码端，处理方式不变，访问/api+原接口url。（无变化）

this.$http.get('/api/interface/blogs/all')...
  （2）在开发时继续保持Vue.js的代理存在。配置代码如下：（无变化）

proxyTable: {
  '/api': {
    target: 'http://siwei.me',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},
  （3）在nginx的配置文件中加入代理（详细说明参见代码中的注释，这个是新增的）。
也就是说，上面的配置把：

  http://vue_demo.siwei.me/api/interface/blogs/all
  在服务器端的nginx中做了变换，相当于访问了：

  http://siwei.me/interface/blogs/all
  重启nginx，就会发现已经生效了。恢复正常的文章列表页如图5-9所示。

图5-9 恢复正常的文章列表页