Wordpress REST API create users not working - angularjs

I want to create and retrieve users in my WordPress site using an AngularJS client application. I am using WP REST API (Version 2) plugin and JWT Authentication for WP REST API plugin. I am using the following code:
(function() {
var app = angular.module('jwtAuth', []);
app.config(function($httpProvider) {
$httpProvider.interceptors.push(function() {
return {
'request': function(config) {
var token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = 'Bearer ' + token;
}
return config;
}
};
});
});
app.controller('MainController', function($scope, $http) {
var apiHost = 'http://mytechpen.com/wp-json'
localStorage.removeItem("token");
$http.post(apiHost + '/jwt-auth/v1/token', {
username: 'test1',
password: 'test123'
})
.then(function(response) {
console.log(response.data.token)
localStorage.setItem("token", response.data.token);
$http({
url: apiHost + '/wp/v2/users',
method: 'POST',
data: {
username: 'test4',
password: 'test123',
email: 'test4#gmail.com'
},
header: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + response.data.token
}
})
.then(function(response) {
console.log(response.data)
})
.catch(function(error) {
console.error('Error', error);
});
})
.catch(function(error) {
console.error('Error', error);
});
});
})();
I am getting the token in the first request. But there is an error occurring in the 2nd request. That is:
I thought this is a CROS issue, so I added
Header add Access-Control-Allow-Origin "*"
To the .htaccess file. After that I am not able to get the token, I am getting an error saying Access-Control-Allow-Origin' header contains multiple values.
Here is my htaccess file without the Access-Control-Allow-Origin' header.
# 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]
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
</IfModule>
# END WordPress
Apart from that I have added the configurations mentioned in JWT plugin document to wp-config file as well.

it work for me
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

I just added this:
RewriteEngine On
RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]

Related

Getting error as "404 not found" when refresh page in react js

I am Getting error as "404 not found" when refresh page in react js. it's working on localhost but when i moved code on server then Getting this error.
I encountered this as well and has to do with server configuration. What you need to do is configure your server that when visiting /*, return your index.html.
Now you probably only have / configured to return index.html.
How to do that, depends on your technology:
Express
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
})
Apache Htaccess
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
You will have to configure your server in a way that if no resource is found for a request then the server should always return an index.html file.
You can use the below code:
if(process.env.NODE_ENV==='production'){
app.use(express.static('client/build'));
const path=require('path');
app.get('*',(req,res)=>{
res.sendfile(path.resolve(__dirname,'client','build','index.html'));
})
}

Prerender.io not caching my pages

So I'm trying to set up prerender.io for my AngularJS application with a ExpressJS backend following this tutorial. I have done exactly as instructed, the only difference being I have enabled HTML5mode. I have included the meta(name="fragment" content="!") in my index.jade and the prerender token to my server.js file (using the prerender-node package) but somehow my pages do not seem to be cached or generate any crawl stats.
config.coffee
angular.config ['$stateProvider','$urlRouterProvider','$locationProvider','toastrConfig',($stateProvider, $urlRouterProvider,$locationProvider,toastrConfig)->
$stateProvider
.state 'home',
url:'/'
templateUrl: 'html/main.html'
controller:'mainController'
$urlRouterProvider.otherwise '/'
$locationProvider.html5Mode
enabled: true
requireBase: false
$locationProvider.hashPrefix '!'
]
Server.JS
// Here we require the prerender middleware that will handle requests from Search Engine crawlers
// We set the token only if we're using the Prerender.io service
app.use(require('prerender-node')
.set('prerenderServiceUrl', 'http://www.mydomain.co.com/')
.set('prerenderToken', 'my-token'));
// HTML5MODE settings
// ------------------------------------------------------
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/html', express.static(__dirname + '/public/html'));
// Routes
// ------------------------------------------------------
require('./app/js/routes/routes.js')(app);
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('/public/index.html', { root: __dirname });
});
You should remove this line from your config:
.set('prerenderServiceUrl', 'http://www.mydomain.co.com/')
The service URL should point to a Prerender server, so you shouldn't set that to your website URL.
I think you should make sure that you have implemented the correct prerender.io configuration in your Angular App.
I tested the below code and correctly cached it in the prerender.io dashboard.
File: ../static/routes.json content
["/","/content/terms-conditions","/content/about-us",..]
File: /config/webpack.production.js
const axios = require('axios');
const routesData = require('../static/routes.json'),
console.log("PRERENDER.io caching start for Crawler Bots to SEO indexing");
const host = 'your domain name with http or https';
const prerenderToken = '****';
const prerenderUrl = 'https://api.prerender.io/recache';
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
console.log("Start date time : "+dateTime);
for (const route of routesData) {
const fullRoute = host + route + '/index.html';
console.log(`Caching URL ${fullRoute}`);
var prerednerData = {
'prerenderToken': prerenderToken,
'url': fullRoute
};
axios.post(prerenderUrl, prerednerData)
.then((response) => {
console.log('Product URL: '+prerednerData['url']);
console.log('Status Code: '+response.status);
})
.catch((error) => {
console.log('Product URL: '+prerednerData['url']);
console.log('Error: '+error);
});
}
File: .htaccess
Options -Indexes
<IfModule mod_headers.c>
RequestHeader set X-Prerender-Token "****"
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
# Pre-render HTML for search crawler bots to indexing
<IfModule mod_proxy_http.c>
RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_
# Only proxy the request to Prerender.io if it's a request for HTML
RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff|\.svg))(.*) http://service.prerender.io/https://www.globalshop.com.au/$2 [NE,L,R=301]
</IfModule>
RewriteCond %{HTTP_HOST} www.domainname.com$ [NC]
RewriteRule ^(.*)$ https://www.domainname.com/$1 [R=301,L]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^robots\.txt$ robots-disallow.txt [L]
RewriteCond %{HTTP:X-Forwarded-Proto} =http
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html
</IfModule>
Cheers!

parse.com angularjs SPA - equivalent to HTML5 .htaccess

I'm trying to host an angularjs SPA on parse.com
I haven't uploaded any server code for now (they're just static files!)
https://app.hybridrecruitment.com
The following link will work: https://app.hybridrecruitment.com/#/pages/auth/register
While https://app.hybridrecruitment.com/pages/auth/register will return page not found.
Can you please advise on the cloud code equivalent to this .htaccess?
<IfModule mod_rewrite.c>
RewriteEngine On
# Send all requests to the index.html unless
# it's a directory or a file that actually exists
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
</IfModule>
Got a solution by myself. Don't know if it's the most logical. But it works.
Basically on each request I grab and serve the index.html.
var express = require('express');
var app = express();
//push state interceptors
var pushUrlPrefixes = [""];
var index = null;
function getIndex(cb) {
return function(req, res) {
Parse.Cloud.httpRequest({
url: 'my_url_here', // works only in http
success: function(httpResponse) {
index = httpResponse.text;
cb(req, res);
},
error: function(httpResponse) {
console.log('error');
console.log(httpResponse);
res.send("We're very busy at the moment, try again soon:"+httpResponse.text);
}
});
}
}
pushUrlPrefixes.forEach(function(path) {
app.get("/"+path+"*", getIndex(function(req, res) {
res.set('Content-Type', 'text/html');
res.status(200).send(index);
}));
});

Angular JS setting a base API URL for requests

i am building an AngularJS app this is what i have atm:
App.js
var youtubeTrackerApp = angular.module('youtubeTrackerApp', [
'youtubeTrackerControllers',
'youtubeTrackerServices'
]);
Services.js
var youtubeTrackerServices = angular.module('youtubeTrackerServices', ['ngResource']);
youtubeTrackerServices.factory('YouTubeVideo', function($http) {
var YouTubeVideo = function(data) {
angular.extend(this, data);
}
YouTubeVideo.get = function(id) {
return $http.get('/Api/YouTubeVideo/' + id).then(function(response) {
return new YouTubeVideo(response.data);
});
};
YouTubeVideo.prototype.create = function() {
var youTubeVideo = this;
return $http.post('Api/YouTubeVideo/', youTubeVideo).then(function(response) {
youTubeVideo.id = response.data.id;
return youTubeVideo;
});
}
return YouTubeVideo;
});
The issue is that Angular is posting like this:
http://localhost/Api/YouTubeVideo/123
And while i am developing, i need it to post to
http://localhost/youtubetracker/web/app_dev.php/Api/YouTubeVideo/123
Since i am using Symfony. I am quite new to AngularJS, the and i cant seem to figure out how to inject a base URL between the localhost and endpoint.
Any other tips combining Symfony and Angular are welcome.
when using a PHP end point i would suggest hacking into the .htaccess file
Something like this
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^(.*)$ api.php?x=$1 [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ api.php [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} -s
RewriteRule ^(.*)$ api.php [QSA,NC,L]
http.get youtubetracker/web/app_dev/Api/YouTubeVideo/123
php api file in youtubetracker/web/app_dev/Api/
im assuming that YouTubeVideo & 123 params

angularJS, prerender.io and ZF2: testing locally returns 304 access forbidden

I am a n00b with this stuff, I am trying to set up a testing environment for prerender.io.
I've downloaded prerender here: https://github.com/prerender/prerender.git and I've run this from the commandline:
$ npm install
$ node server.js
I read the documentation here: https://github.com/zf-fr/zfr-prerender
Instead of:
return array(
'zfr_prerender' => array(
'prerender_url' => 'http://myprerenderservice.com'
)
);
I did this:
return array(
'zfr_prerender' => array(
'prerender_url' => 'http://localhost'
)
);
This is my angular router:
var ListerApp = angular.module('ListerApp',[
'ListerAppFilters',
'sharedFactoryApp',
'sharedServiceApp',
'ListerAppController',
'infinite-scroll',
'angular-inview',
'ngRoute',
'itemsReady'
]);
ListerApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/list/:page?',
{
templateUrl : '/assets/services/partials/list.html',
controller : 'ListerCtrl',
reloadOnSearch : false,
js : ['/assets/min/shoplist_js.min.js', '/assets/min/bootstrap-typeahead.min.js'],
resolve : {
sharedServiceAppData: function($sharedData){
return $sharedData.promise();
}
}
}
)
.when('/detail/:id?',
{
templateUrl: '/assets/services/partials/detail.html',
controller: 'DetailCtrl',
css : ['/assets/min/star-rating.min.css'],
resolve : {
sharedServiceAppData: function($sharedData){
return $sharedData.promise();
}
}
}
).otherwise({ redirectTo: '/list/1' });
}]);
This url works fine: http://localhost/shop/api/list
This url returns "Access Forbidden!": http://localhost/shop/api/list?_escaped_fragment_=/list
The error.log contrains:
[core:error] [pid 5952:tid 1864] (20024)The given path is misformatted or contained invalid characters: [client ::1:50262] AH00127: Cannot map GET /http://localhost/shop/api/list?_escaped_fragment_=/list HTTP/1.1 to file
My .htaccess file:
RewriteEngine On
RewriteRule ^\.htaccess$ - [F]
RewriteCond %{REQUEST_URI} =""
RewriteRule ^.*$ /public/index.php [NC,L]
RewriteCond %{REQUEST_URI} !^/public/.*$
RewriteRule ^(.*)$ /public/$1
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^public/.*$ /public/index.php [NC,L]
Are you seeing any console output on the Prerender server?
First, the URL you probably want to use is http://localhost/shop/api/list?_escaped_fragment_=
but you probably don't want to prerender an API call. That should really probably be http://localhost/shop/list/1?_escaped_fragment_= or whatever your url structure is for an actual page.

Resources