api - from origin 'http:localhost:3000' has been blocked by CORS policy

admin管理员组

文章数量:1122846

I started a little WordPress project on localhost:3000.

I create a custom post type and wanted to update the data via /wp/v2/custom_post_type/{id}

On localhost:3000 i always get his error:

Access to fetch at 'http://localhost/WordPress/xxx/wp-json/wp/v2/xxx/1500?_locale=user' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.Understand this error
index.js:102 
        
        
       POST http://localhost/WordPress/xxx/wp-json/wp/v2/xxx/1500?_locale=user net::ERR_FAILED
defaultFetchHandler @ index.js:102
fetchAllMiddleware @ fetch-all-middleware.js:84
(anonymous) @ index.js:163
httpV1Middleware @ http-v1.js:40
(anonymous) @ index.js:163
namespaceAndEndpointMiddleware @ namespace-endpoint.js:24
(anonymous) @ index.js:163
userLocaleMiddleware @ user-locale.js:24
(anonymous) @ index.js:163
apiFetch @ index.js:168
update @ xxxMenu.js:59
(anonymous) @ MenuCard.js:641
bulkUpdatePosts @ MenuCard.js:634
uploadToCustomPostType @ MenuCard.js:647
complete @ MenuCard.js:599
parseChunk @ papaparse.min.js:7
_chunkLoaded @ papaparse.min.js:7
(anonymous) @ papaparse.min.js:7
load
stream @ papaparse.min.js:7
parse @ papaparse.min.js:7
handleImport @ MenuCard.js:504
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26179
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430Understand this error
xxxMenu.js:73 Error fetching posts: {code: 'fetch_error', message: 'You are probably offline.'}

When i build my js files and try it directly on my website i have no problems. Therefore i wanna know which settings i have to add, that i can test the api fetch on localhost:3000?

What i have done:

1) functions.php

function allow_cors_from_localhost($headers) {
    // Set allowed origin to your front-end domain
    $headers['Access-Control-Allow-Origin'] = 'http://localhost:3000';
    $headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
    $headers['Access-Control-Allow-Credentials'] = 'true';
    $headers['Access-Control-Allow-Headers'] = 'Content-Type, X-WP-Nonce, Authorization';

    return $headers;
}
add_filter('rest_api_init', function () {
    add_filter('rest_pre_serve_request', function ($value) {
        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Headers: Content-Type, X-WP-Nonce, Authorization');
        return $value;
    });
});

2) .htaccess

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /WordPress/xxx/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /WordPress/xxx/index.php [L]
</IfModule>

# END WordPress

本文标签： apifrom origin 39httplocalhost300039 has been blocked by CORS policy