vue.js解决域名问题与跨域问题_优品建站

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

  我们在部署之后会发现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 恢复正常的文章列表页

  • 指令在Vue.js 2.0中的应用及变化
    由于指令在Vue.js2.0中发生了比较大的变化,所以本节单独来说明下这些情况。总得来说,Vue.js 2.0中的指令功能更为单一,很多和组件重复的功能和作用都进行了删除,指令也更专注于本身作用域的操作,而尽量不去影响指令外的DOM元素及数据。
  • 面试官问:Ajax跨域问题,你是如何解决的?
    面试官问你这样的问题,比如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com,你会如何去解决呢?
  • Vue.js渲染页面的过程和原理
    只有知道一个页面是如何被渲染出来的,才能更好地理解框架和调试代码,下面就来学习一下Vue.js渲染页面的过程和原理。
  • Vue.js的事件绑定与监听
    当模板渲染完成之后,就可以进行事件的绑定与监听了。Vue.js提供了v-on指令用来监听DOM事件,通常在模板内直接使用,而不像传统方式在js中获取DOM元素,然后绑定事件。
  • vue.js的属性绑定:v-bind
    有些指令,例如v-bind,可以接收参数。v-bind指令用于将一个值绑定到一个HTML属性上。
  • Webpack下的Vue.js项目文件结构
    前面我们已经安装了Webpack、vue-cli并运行成功,看到了Vue.js的第一个页面。那么我们首先需要对Webpack下的Vue.js有一个全面的了解。
  • vue.js如何进行模板渲染
    当获取到后端数据后,我们会把它按照一定的规则加载到写好的模板中,输出成在浏览器中显示的HTML,这个过程就称之为渲染。而Vue.js是在前端(即浏览器内)进行的模板渲染。本节主要介绍Vue.js渲染的基本语法。
  • Vue.js实例及选项
    从以前的例子可以看出,Vue.js的使用都是通过构造函数Vue({option})创建一个Vue的实例:var vm = new Vue({})。一个Vue实例相当于一个MVVM模式中的ViewModel。
  • Vue.js中的NVM、NPM与Node介绍
    NVM(Node Version Manager)是非常好用的Node版本管理器。这个技术出现的原因,是由于不同的项目node版本也不同,有的是5.0.1,有的是6.3.2。如果node版本不对,运行某个应用时,很可能就会遇到各种莫名其妙的问题。
  • 网站制作和APP开发前端为什么选择Vue.js
    如果不使用框架,项目最终会成为一团不可维护的代码,而绝大部分代码所要处理的工作,框架都已经为我们抽象出来了。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC