Vue+Apache+PHP+docker跨域問(wèn)題解決方案

架構(gòu)說(shuō)明

前端：

vue2的框架，在github上找的。 Vue Element Admin框架。

后端：

thinkphp6框架

服務(wù)器

apache

頁(yè)面代碼展示

vue框架，本身封裝了axios請(qǐng)求，框架本身還自帶mock；

我直接在這個(gè)基礎(chǔ)上開(kāi)發(fā)，寫(xiě)了1個(gè)demo.vue的頁(yè)面，對(duì)應(yīng)demo.js文件封裝api；

vue文件如下

<template>
<div>
    請(qǐng)求POST接口返回的結(jié)果是：{{ res.api1 }}
    </div>
</template>

<script>
    import { AddUserInfo } from '@/api/attendance_statistics'

    export default {
        data() {
            return {
                res: { api1: null }
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                const userInfo = {
                    name: 'John Doe',
                    name2: 'John Doe'
                }

                AddUserInfo(userInfo)
                    .then(response => {
                    console.log(response.data)
                    this.res.api1 = response
                })
                    .catch(error => {
                    console.log('error1111', error)
                })
            }
        }
    }
</script>

js文件如下

import apiClient from '@/utils/request'


export async function GetUserList() {
    // eslint-disable-next-line no-useless-catch
    try {
        const response = await apiClient.get('/demo/testApi')
        return response.data
    } catch (error) {
        throw error
    }
}

export async function AddUserInfo(userInfo) {
    // eslint-disable-next-line no-useless-catch
    try {
        const response = await apiClient.post('/demo/testAdd', JSON.stringify(userInfo))
        return response.data
    } catch (error) {
        throw error
    }
}

baseurl

通過(guò)閱讀自帶的請(qǐng)求類封裝的代碼發(fā)現(xiàn)，baseurl是VUE_APP_BASE_API控制的。于是就找到.env.development文件

修改baseurl

# just a flag
ENV = 'development'

# base api,真實(shí)騰訊云服務(wù)器綁定的域名。
VUE_APP_BASE_API = 'http://pmadmin.xxxx.icu/'

發(fā)送請(qǐng)求

我在vue頁(yè)面刷新，生命周期會(huì) 自動(dòng)發(fā)送api，果然就報(bào)錯(cuò)了。弄了大半天，還找了淘寶的技術(shù)員，沒(méi)搞定，控制臺(tái)一直報(bào)錯(cuò)說(shuō)跨域問(wèn)題。

干脆復(fù)制錯(cuò)誤去百度

解決步驟

說(shuō)服務(wù)器端Header always set Access-Control-Allow-Origin設(shè)置錯(cuò)誤，我改成了

Header always set Access-Control-Allow-Origin "*"

我在請(qǐng)求攔截器里設(shè)置的是token， config.headers[‘Token’] 。

// request interceptor
service.interceptors.request.use(
    config => {
        // do something before request is sent

        if (store.getters.token) {
            // let each request carry token
            // ['X-Token'] is a custom headers key
            // please modify it according to the actual situation
            config.headers['Token'] = getToken()
        }

        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

控制臺(tái)報(bào)錯(cuò)說(shuō)我Token頭信息不被服務(wù)器接納。那服務(wù)器再設(shè)置

Header always set Access-Control-Allow-Headers "Content-Type,token"

完整解決方案

后端站點(diǎn)的conf文件內(nèi)配置跨域

<VirtualHost *:80>
    ServerName pmadmin.xxxxxxx.icu
    DocumentRoot /usr/local/apache2/wwwv2/pm-admin/public

    # 添加跨域配置
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header always set Access-Control-Allow-Headers "Content-Type,token"

    <Directory /usr/local/apache2/wwwv2/pm-admin/public>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        DirectoryIndex index.php
    </Directory>
    ProxyPassMatch ^/(.*\.php(/.*)?)$ fcgi://dnmp_php74:9000/usr/local/apache2/wwwv2/pm-admin/public/$1
    ProxyPassReverse / fcgi://dnmp_php74:9000/usr/local/apache2/wwwv2/pm-admin/public/
</VirtualHost>

總結(jié)

就算是控制臺(tái)報(bào)了跨域錯(cuò)誤，也要分析具體錯(cuò)誤是什么原因?qū)е碌?。不同的跨域錯(cuò)誤，有不同的解決方案；

• 來(lái)源地址不被接受
• 請(qǐng)求頭內(nèi)的參數(shù)不被接受

歡迎補(bǔ)充!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-482926.html

到了這里，關(guān)于Vue（Vue Element Admin）+Apache+thinkphp6項(xiàng)目，解決跨域問(wèn)題；的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！