设置yarn代理服务器主机和端口配置代理服务器端口

转载

误会一场 2024-06-29 09:57:49

文章标签 设置yarn代理服务器主机和端口 javascript 前端 vue.js ios 文章分类 Yarn 大数据

配置代理

一、Vue脚手架配置代理

可以配制出一个代理服务器，用于解决跨域问题。

代理服务器的端口号和Vue端口号相同，所以访问代理服务器时不存在跨域问题。

方法一：

在vue.config.js中添加配置：

devServer: {
    proxy:'http://localhost:5000'
}

页面中本来请求5000端口服务器的url改为请求8080代理服务器（vue端口号是8080，代理服务器端口号和vue端口号相同）：

// 原本要请求localhost:5000/students，现在发给代理服务器localhost:8080
axios.get('http://localhost:8080/students').then(
    response => {
        console.log('请求成功了', response.data)
    },
    error => {
        console.log('请求失败了', error.message)
    }
)

优点：配置简单，请求资源时直接发送给前端8080端口即可

缺点：不能配置多个代理，不能灵活的控制请求是否走代理

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器。优先匹配项目中已有的资源，例如http://localhost:8080/favicon.ico获取到的是本地的文件，而不会转发给服务器。

方法二：

在vue.config.js中添加配置：

devServer: {
    proxy: {
        '/test': {  // 请求前缀
            target: 'http://localhost:5000',
            pathRewrite: {'^/test': ''},   // 请求服务器时去掉/test前缀
            ws: true,  // 用于支持WebSocket，默认true
            changeOrigin: true  // 用于控制请求头的host值，默认true
        },
        '/demo': {  
            target: 'http://localhost:5001',
            pathRewrite: {'^/demo': ''},   
            ws: true,  
            changeOrigin: true 
         },
    }
}

页面中请求路径需要加上指定的前缀：

// 请求localhost:8080/test 会被转发给localhost:5000
axios.get('http://localhost:8080/test/students').then(
    response => {
        console.log('请求成功了', response.data)
    },
    error => {
        console.log('请求失败了', error.message)
    }
)

相关参数：

pathRewrite：修改请求资源路径。

默认情况下，请求的资源路径会被直接转发给服务器，例如http://localhost:8080/test/students会被转发成http://localhost:5000/test/students。如果要去掉前缀test，需要在pathRewrite中使用正则表达式替换掉。

ws：用于支持WebSocket，默认true
changeOrigin：用于控制请求头的host，默认true

当changeOrigin为false时，代理服务器发给服务端的请求来源host为代理服务器真实的host，服务端接收到的请求来源的host为：localhost:8080
当changeOrigin为true时，代理服务器会“欺骗”服务端，用服务端的host当做请求来源host，服务端接收到的请求来源的host为：localhost:5000
一般情况下，将该项设置为true（默认值）。防止服务端加了请求来源必须为同源的限制

优点：可以配置多个代理，且可以灵活的控制请求是否走代理

缺点：配置略微繁琐，请求资源时必须加前缀

二、常用的ajax技术对比

常用的ajax技术：

xhr（XMLHttpRequest）：原生window自带的对象，可以直接使用。但是用法繁琐，很少使用
Jquery：可以使用 $设置yarn代理服务器主机和端口配置代理服务器端口_设置yarn代理服务器主机和端口$ .post进行ajax操作，但Jquery中大部分工作是便于操作DOM，而Vue中要尽量避免DOM操作，所以VUE中不推荐使用Jquery
axios：封装的promise风格的ajax请求，需要引入axios库。最常用。
fetch：也可以使用promise风格的ajax请求。fetch是js内置的，不依赖xhr。但是fetch会将返回的数据包装两层promise，而且不兼容IE浏览器。
vue-resource：vue的插件，用法和axios完全一样，但是很久没有维护了，在vue1.0时代用的较多

axios的使用：

安装axios

npm i axios

引入并使用

import axios from 'axios'

axios.get('http://localhost:8080/students').then(
    response => {
        console.log('请求成功了', response.data)  // 响应数据存在response的data属性中
    },
    error => {
        console.log('请求失败了', error.message)  // 错误信息存在error的message属性中
    }
)

vue-resource的使用：

安装vue-resource

npm i vue-resource

在main.js中应用插件

import vueResource from 'vue-resource'

// 使用该插件后，vm和vc对象都会多出来一个$http属性
Vue.use(vueResource)

使用vue-resource发送请求

// 使用vue-resource插件后，vm和vc会多出来$http属性
// 使用$http发送请求和使用axios发送请求的写法一模一样
this.$http.get('http://localhost:8080/students').then(
    response => {
        console.log('请求成功了', response.data)
    },
    error => {
        console.log('请求失败了', error.message)
    }
)