Shulou(Shulou.com)06/01 Report--

Editor to share with you how the nginx server through configuration to solve the cross-domain problem of API, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Preface

Recently, when invoking a http request with jquery ajax, a series of problems were found:

For example, if you debug the API request with firebug (this API is the application of your own server), you can see that the server clearly returns a status of 200, and the data returned by response is also in json format, but the error returned by ajax.

After excluding the reason for the incorrect format of the json data, it is found that the ajax error function returns "networkerror failed to execute 'send' on' xmlhttprequest' failed to load 'http / /" XMLHttpRequest.status=0, which means it is not initialized.

It was later learned that it was a cross-domain problem (CORS), because the program called the API of the remote server, and the server did not allow cross-domain calls. If it's a simple method, you just need to add the cross-domain header attribute "Access-Control-Allow-Origin: *" to the response of the program.

For example, the java server code:

Yourownvariable.setHeader ("Access-Control-Allow-Origin:", "origin url of your site"); yourownvariable.setHeader ("Access-Control-Allow-Methods", "GET, POST,PUT")

If you are configuring a nginx server (if it is another server, please refer to: I want to add CORS support to my server), you need to add the following to the nginx.conf configuration file:

# # Wide-open CORS config for nginx#location / {if ($request_method = 'OPTIONS') {add_header' Access-Control-Allow-Origin''*'; add_header 'Access-Control-Allow-Methods'' GET, POST, OPTIONS' # # Custom headers and headers various browsers * should* be OK with but aren't#add_header 'Access-Control-Allow-Headers'' DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';## Tell client that this pre-flight info is valid for 20 days#add_header 'Access-Control-Max-Age' 1728000 to addend the header' Content-Type' 'text/plain charset=UTF-8';add_header' Content-Length' 0 Return 204;} if ($request_method = 'POST') {add_header' Access-Control-Allow-Origin''*'; add_header 'Access-Control-Allow-Methods'' GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers'' DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' Add_header 'Access-Control-Expose-Headers'' DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';} if ($request_method = 'GET') {add_header' Access-Control-Allow-Origin''*'; add_header 'Access-Control-Allow-Methods'' GET, POST, OPTIONS' Add_header 'Access-Control-Allow-Headers'' DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';add_header 'Access-Control-Expose-Headers'' DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' }} these are all the contents of the article "how to configure the nginx server to solve the cross-domain problem of API". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.