Vue-configure proxy (solve cross-domain problems)

Now there are two main ways to solve cross-domain: CORS and Jsonp, but more often used in development is to configure a proxy server.

 

In the picture above, the left side is the location of the client, and the middle is the proxy server. Note that the red box is the location of the client, the blue box on the right is the 5000 server, and the pink box in the middle is between the server and the blue box server. It is better to make a data request directly, because there is no need for ajax to communicate, and direct http is better.

This 8080 proxy server can be opened with the help of scaffolding vue-cli.

(1) Configure proxy mode 1

Configure proxy server steps:

1. First prepare a requested server serve1.js, and then open it:

const express = require('express');
const app = express();
app.get('/student', (req, res) => {
    const data = [
        { id: '001', name: 'tom', age: 18 },
        { id: '002', name: 'jerry', age: 19 },
        { id: '003', name: 'tony', age: 20 },
    ]
    res.send(JSON.stringify(data))
})
app.listen(5000, function() {
    console.log('running student');
})

2. Open vue.config.js to configure the proxy server:

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
        }
    },

    // 关闭语法检查
    lintOnSave: false,
    // 开启代理服务器
    devServer: {
        proxy: 'http://localhost:5000'
    }
}

Note that you only need to write the port number here, do not add student

3. The client requests the server across domains, the code in App.vue:

<template>
    <div>
        <button @click="btnstudent">获取学生信息</button>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'App',
        methods: {
            btnstudent() {
                axios.get('http://localhost:8080/student').then(function(res) {
                    console.log('请求成功', res.data);
                }, function(error) {
                    console.log('请求失败', error.message);
                })
            }
        },
    }
</script>

<style scoped>

</style>

Note that the specific path is written after the port number here

Click the button to output the result:

 

This configuration of proxy server has two disadvantages:

1. Only one proxy server can be configured

2. It is not possible to flexibly control whether to leave the agent or not. For example, if there is a student file in my public folder, it will not use the agent but directly give us the student file

(2) Configure proxy server method 2

config.js code:

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
        }
    },

    // 关闭语法检查
    lintOnSave: false,
    // 开启代理服务器
    devServer: {
        proxy: {
            // 想走代理就在请求前缀加上一个api，不想走就不加
            '/sy': {
                target: 'http://localhost:5000',
                // 这样才能保证当代理服务器拿到/sy/student的时候转换成/student再发给5000端口的服务器
                pathRewrite: { '^/sy': '' }
                // ws: true,
                // changeOrigin: true
            },
            '/demo': {
                target: 'http://localhost:5001',
                // 这样才能保证当代理服务器拿到/sy/student的时候转换成/student再发给5000端口的服务器
                pathRewrite: { '^/demo': '' }
                // ws: true,
                // changeOrigin: true
            }
        }
    }
}

serve1.js code:

const express = require('express');
const app = express();
app.get('/student', (req, res) => {
    const data = [
        { id: '001', name: 'tom', age: 18 },
        { id: '002', name: 'jerry', age: 19 },
        { id: '003', name: 'tony', age: 20 },
    ]
    res.send(JSON.stringify(data))
})
app.listen(5000, function() {
    console.log('running student');
})
serve2.js代码：

serve2.js code:

const express = require('express');
const app = express();
app.get('/cars', (req, res) => {
    const data = [
        { id: '001', name: '奔驰', price: 199 },
        { id: '002', name: '马自达', price: 109 },
        { id: '003', name: '捷达', price: 120 },
    ]
    res.send(JSON.stringify(data))
})
app.listen(5001, function() {
    console.log('running cars');
})

App.vue code:

<template>
    <div>
        <button @click="btnstudent">获取学生信息</button>
        <button @click="btncar">获取汽车信息</button>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'App',
        methods: {
            btnstudent() {
                axios.get('http://localhost:8080/sy/student').then(function(res) {
                    console.log('请求成功', res.data);
                }, function(error) {
                    console.log('请求失败', error.message);
                })
            },
            btncar() {
                axios.get('http://localhost:8080/demo/cars').then(function(res) {
                    console.log('请求成功', res.data);
                }, function(error) {
                    console.log('请求失败', error.message);
                })
            }
        },
    }
</script>

<style scoped>

</style>

Information can be obtained by clicking both buttons: