如何在react-native中为webView请求设置自定义标头

Question

I want to be able to detect on my ruby on rails server side that a http request has come from a webView component in my app. The app is using react-native. In particular, I want to distinguish between a request from the app and a request from mobile safari running on an ios device.

I have tried setting the following in the AppDelegate.m file

  NSURL *url = [NSURL URLWithString:@"http://localhost:3000/signin"];
  NSMutableURLRequest *request=[NSMutableURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:60];
  [request addValue:@"GolfMentor" forHTTPHeaderField:@"User-Agent"];
  [request addValue:@"GolfMentor" forHTTPHeaderField:@"X-MY-CUSTOM-HEADER"];
  NSLog(@"%@", [request allHTTPHeaderFields]);

and the output in the console is

GolfMentor[63924:12437749] {
"User-Agent" = GolfMentor;
"X-MY-CUSTOM-HEADER" = GolfMentor;
}

So the customer header appears to be set. However, when I view the request header in my ruby on rails app, there is no sign of the custom header. It looks like my changes are being overwritten latter in the execution of the react-native app. So where and how should I set the custom header? I am also interested in do the same thing for an android version of the app?

Answer 1

Try adding the following lines to AppDelegate.m to set the custom user-agent

NSString *newAgent = @"GolfMentor";
NSDictionary *dictionnary = [[NSDictionary alloc] initWithObjectsAndKeys:newAgent, @"UserAgent", nil];
[[NSUserDefaults standardUserDefaults] registerDefaults:dictionnary];

A fuller answer and the solution for android can be found here .

Answer 2

I kind of doubt you will be able to do this. If it is not exposed as a prop you can set on the WebView component React Native provides, then I don't think you can do it.

As an aside, the WebView component in React Native is not that awesome. On the iOS side it wraps UIWebView, but for iOS 8+ there is WkWebView, which is more standards-compliant and considerably faster than UIWebView.

http://blog.initlabs.com/post/100113463211/wkwebview-vs-uiwebview

I am currently working on an app that makes extensive use of webviews, and we wound up writing our own native components for iOS and Android. This is easier than it sounds, especially if you already have native development experience. So if you're doing a lot with webviews, and the out-of-the-box component doesn't give you what you want (and you want the added benefits of WkWebView vs. UIWebView), I would consider rolling your own.