Vue（Vue Element Admin）+Apache+thinkphp6项目，解决跨域问题；

Vue+Apache+PHP+docker跨域问题解决方案

可以查看我的另一个跨域总结文章

架构说明

前端：

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

后端：

thinkphp6框架

服务器

apache

页面代码展示

vue框架，本身封装了axios请求，框架本身还自带mock；

我直接在这个基础上开发，写了1个demo.vue的页面，对应demo.js文件封装api；

vue文件如下

<template>
<div>
    请求POST接口返回的结果是：{{ 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

通过阅读自带的请求类封装的代码发现，baseurl是VUE_APP_BASE_API控制的。于是就找到.env.development文件

修改baseurl

# just a flag
ENV = 'development'

# base api,真实腾讯云服务器绑定的域名。
VUE_APP_BASE_API = 'http://pmadmin.xxxx.icu/'

发送请求

我在vue页面刷新，生命周期会 自动发送api，果然就报错了。弄了大半天，还找了淘宝的技术员，没搞定，控制台一直报错说跨域问题。

干脆复制错误去百度

解决步骤

说服务器端Header always set Access-Control-Allow-Origin设置错误，我改成了

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

我在请求拦截器里设置的是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)
    }
)

控制台报错说我Token头信息不被服务器接纳。那服务器再设置

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

完整解决方案

后端站点的conf文件内配置跨域

<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>

总结

就算是控制台报了跨域错误，也要分析具体错误是什么原因导致的。不同的跨域错误，有不同的解决方案；

• 来源地址不被接受
• 请求头内的参数不被接受

欢迎补充!