[step on the pit series] H5 cross domain problem of uniapp

【 Step on the pit series 】uniapp And h5 Cross domain issues

Preface

Debug the mobile interface on the browser , appear Multiple... Are not allowed ‘Access-Control-Allow-Origin’ CORS Header information . And see Response Information returned , It is thought that there are many configurations on the server Settings for cross domain access , The problem caused by , So I've been looking for problems on the back end , After spending some time checking , Multiple cross domain access settings are not configured , And the real machine of the mobile terminal can be accessed normally , This has reversed the idea of investigation , Solve the problem from the front end .

What is cross-domain

Cross domain is a browser specific concept , finger js The code accesses sites other than its own source site . such as A In the web page of the site js Code , Request the B Site data , It's cross domain .
A and B To be considered a homogeneous domain , Then there must be the same agreement （ such as http and https No way. ）、 Same domain name 、 And the same port number （port）.

If you are doing App、 Small program, etc H5 platform , It does not involve cross domain issues .

How to solve

Solution ：uni-app The official recommendation Use HBuilderX Browser built in Go preview , There will be no cross domain issues in built-in browsers ; But if it is Chrome This cross domain problem will appear when previewing in browser , Official recommendation install Allow-Control-Allow-Origin: * plug-in unit The way to solve . Reference resources ：uni-app H5 Cross domain problem solution （CORS、Cross-Origin）.

#  Whether cross domain access is allowed  CORS, If allowed , Set allowed domain names 
  accessControlAllowOrigin: '*'

  #  When cross domain access is allowed  CORS, Methods and request headers that can be retrieved and returned 
  accessControlAllowMethods: GET, POST, OPTIONS
  accessControlAllowHeaders: content-type, x-requested-with, x-ajax, x-token, x-remember
  accessControlExposeHeaders: x-remember

Reference article

uni-app H5 Cross domain problem solution （CORS、Cross-Origin）

uni-app And H5 End to end cross domain problem solutions