vue.config.js cross-domain configuration

Cross-domain problem : It refers to the problem that occurs when any of the protocol , domain name , and port number in your request path is different.

For example, your request path is: http://iwenwiki.com/api/FingerUnion/list.php

Protocol: The http that hangs at the top of the path is the protocol (it may also be https)

Domain name: iwenwiki.com is the domain name (usually after the agreement, before the api or data)

Port number: The default port number is 8080 (generally unchanged)

Configuration of the cross-domain problem page

<template>
    <div>
        <h3 @click="c">跨域问题解决方案</h3>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        methods: {
            c() {
                axios.get("/api/FingerUnion/list.php")
                    .then(res => {
                        console.log(res.data)
                    })
            }
        }
    }
</script>

Configuration of vue.config.js

module.exports = {
    devServer: {
        proxy: { //配置跨域
            '/api': {
                target: 'http://iwenwiki.com', //这里应该填写你们真实的后台接口
                ws: true,
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/api/FingerUnion/list.php': '' //请求的时候使用这个api就可以
                }
            }
        }
    }
}