Wordpress (WooCommerce)创建客户的跨源问题

Question

我正在测试从前端发布数据到后端wordpress (woocommerce)创建客户帐户。我测试了邮递员，它的工作很棒，但如果我从前端发布数据到后端，我有一个跨源问题。

我知道跨源问题是两个领域的问题，防止资源共享，但我尝试了很多方法，但还是得不到问题的解决。有人知道我该怎么解决这个问题吗？

错误：

Cross Origin Problem Refused to set unsafe header "User-Agent" from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

nuxt.js / pages / register.vue

 import {
        createWooComCustomer
    } from '@/plugins/woocomapi.js'
    export default {
        data() {
            return {
                email: '',
                username: '',
                password: ''
            }
        },
        methods: {
            async registerUsers() {
                await createWooComCustomer(this.email, this.username, this.password).then((response) => {
                    console.log(respons)
                }).catch((e) => {
                    throw new Error('failure create customer')
                })
            },
        },
        mounted() {}
    }

nuxt.js / plugins / woocomapi.js (使用woocommerce/woocommerce-rest包)

import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";

// local test api
const api = new WooCommerceRestApi({
    url: "http://localhost:3080",
    consumerKey: "ck_xxx",
    consumerSecret: "cs_xxx",
    version: "wc/v3",
});


// fetch all products from WooCommerce //
export async function fetchWooComProducts() {
    try {
        const response = await api.get("products");
        return response
    } catch (error) {
        throw new Error(error);
    }
}

export async function createWooComCustomer(customer_email, customer_username, customer_password) {
    try {
        const response = await api.post("customers", {
            data: {
                email: customer_email,
                username: customer_username,
                password: customer_password
            }
        })
        return response
    } catch (error) {
        throw new Error(error);
    }
}

wordpress / .htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>
# END WordPress

wordpress /wp-内容/主题/二十一岁/ functions.php

add_action( 'init', 'handle_preflight' );
function handle_preflight() {
    $origin = get_http_origin();
    if ( $origin == 'http://localhost:3000/' ) {
        // You can set more specific domains if you need
        header("Access-Control-Allow-Origin: " . $origin);
        header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
        header("Access-Control-Allow-Credentials: true");
        header( 'Access-Control-Allow-Headers: Authorization' );

        if ( 'OPTIONS' == $_SERVER['REQUEST_METHOD'] ) {
            status_header(200);
            exit();
        }
    }
}

我做了一个restful日志，当邮递员成功创建时，它是请求" post“，但这个总是以"GET”的形式发送，即使我确定是我发送的帖子，也无法创建。我试着把nginx放在允许来源的"*“上，也尝试直接把它放到apcache服务器上，但是没有一个能工作，被困了3天，我不知道如何解决这个问题，如果有人在看了代码后得到了一些好的建议，请和我分享，会很棒的。

这是我的完整回购：https://github.com/differentMonster/woonuxtpress

Answer 1

wordpress /wp-内容/主题/您的wordpress选择的主题/ functions.php

function handle_preflight()
{
    // set header for rest API (and other resources as well?)
    header("Access-Control-Allow-Origin: " . "*");
    header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
    header("Access-Control-Allow-Credentials: true");
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization');
    if ('OPTIONS' == $_SERVER['REQUEST_METHOD']) {
        status_header(200);
        exit();
    }
}

add_action('init', __NAMESPACE__ . '\handle_preflight');

删除if检查$origin，如果在if 'POST‘== $_SERVER’‘REQUEST_METHOD’上有'POST或'PUT‘，则切换到' OPTIONS’，因为选项会更广泛地加入所有选项。

如果您想知道您是改变服务器上的CORS还是.htaccess，只需关注wordpress部分，让我尝试所有部分来查看任何工作，这将造成更多的混乱。尽量简化你的任务。

wordpress / .htacess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

另外，不需要从前端或nginx发送任何标题，在js部分删除数据对象，而woocommerce rest不需要对象数据包装。

nuxt.js / plugins / woocomapi.js

 try {
        const response = await api.post("customers", {
                email: customer_email,
                username: customer_username,
                password: customer_password
        })
        return response
    } catch (error) {
        throw new Error(error);
    }