Independent Development
Hard to know everything but it is necessary
I can write all the business code, even with a language I am not familiar with.
With the help of AI, I can write SQL, which was barely used before.
But there is too much other things.
I spent hours working on WordPress Login session.
It was easy, just a few lines of code, if only I knew what to do.
There must be more things like this, and I have to solve them one by one.
Authorities, email services, login & logout & register, page optimization…
Final Sulation:
As I am using React to write plugins, there is two things necessary:
- Access Control
Backend code:
add_action( 'init', 'my_custom_cors_headers' );
function my_custom_cors_headers() {
// === 1. Determine the exact frontend origin ===
$origin = get_http_origin(); // Gets the Origin header from the request
// === 2. Define ALLOWED ORIGINS (MUST match your frontend's URL exactly) ===
// Use your frontend's exact URL (e.g., http://localhost:3000, http://localhost:5173, etc.)
// If your frontend is https://localhost:3000, then put that.
$allowed_origins = array(
'http://localhost:3000', // Example for a React Dev Server
'http://localhost:5173', // Another common Vite/React Dev Server port
'https://localhost:3000', // If your dev server uses HTTPS
'https://localhost:5173', // If your dev server uses HTTPS
// !!! IMPORTANT !!! If your WordPress is on https://localhost
// and your frontend is on http://localhost:PORT, you will have issues with Secure cookies.
// For local development, make sure your frontend also runs on HTTPS if your WP does.
// OR, for dev, temporarily disable 'Secure' cookie attribute (but not recommended).
);
// === 3. Set Access-Control-Allow-Origin dynamically (RECOMMENDED) ===
if ( $origin && in_array( $origin, $allowed_origins ) ) {
header( 'Access-Control-Allow-Origin: ' . $origin );
} else {
// If not in allowed list, you can either:
// A) NOT set the header (most secure default)
// B) Set it to '*' for development (BUT CANNOT USE WITH CREDENTIALS)
// Since you need credentials (cookies), you CANNOT use '*' here.
// C) For development, if you are unsure of the exact origin, you *might*
// be able to dynamically reflect the origin if it's not a security concern (careful!)
// header( 'Access-Control-Allow-Origin: ' . $origin ); // DANGEROUS IN PRODUCTION
}
// === 4. CRITICAL: Allow Credentials (Cookies) ===
header( 'Access-Control-Allow-Credentials: true' ); // THIS MUST BE TRUE
// === 5. Other important CORS headers ===
header( 'Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS' );
header( 'Access-Control-Allow-Headers: Authorization, Content-Type, X-WP-Nonce, X-Requested-With' );
header( 'Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages' ); // Expose WP-specific headers
// === 6. Handle OPTIONS pre-flight request (already in your code, but keep together) ===
if ( 'OPTIONS' === $_SERVER['REQUEST_METHOD'] ) {
status_header( 200 );
exit(); // Crucial to exit here
}
}Frontend code while fetching, add credentials: ‘include’ like this:
fetch(‘/yourapi’, {
method: 'POST',
credentials: 'include',
…- X-WP-Nonce
Backend code:
wp_localize_script(‘frontend-name’, ‘interface’, array(
'nonce' => wp_create_nonce('wp_rest'),
…Frontend code, add nonce to request Header:
// get in js code
const myNonce = window.interface.nonce;
// headers
'X-WP-Nonce': myNonce
…Related Platforms
(Github Issues) / (Notion) / (Blog)
Advertisement
(A website to optimize your resume and to boost your career: Nonpareil.me)
独立开发
很难了解所有事情，但是却必须了解
我能写业务代码，复杂一点也没关系，用不熟悉的语言也没关系。
有了AI帮忙，我也能处理数据库相关的问题，尽管以前用得很少。
但是还有很多其它问题。
今天和Wordpress的登录Session问题磕了好几个小时，总算差不多了，明天继续。
其实并不困难，只是几行代码的事，不过前提是知道哪里加什么代码。AI能帮忙解决和定位问题，但是想理解AI为什么这么做，很有难度。
肯定还有很多类似的问题，我得一个一个解决。
权限，邮件服务，登录登出注册，页面优化……
解决方案
两个方面最主要，一个是Access Control，一个是X-WP-Nonce。具体代码参考前面英文部分。
相关平台
(Github Issues) / (Notion) / (Blog)