Cross-domain configuration can be divided into front-end configuration, back-end configuration, and Nginx configuration, which are described here respectively

Why does Ajax cross domain happen?
  • Browser restriction For security purposes, the browser performs some verification when discovering that a request is cross-domain. If the verification fails, the browser reports a cross-domain security problem.
  • Cross-domain request Same-origin indicates that the domain name, protocol, and port are the same. If a request is sent using a different protocol, domain name, or port in a different domain, the browser considers the request to be cross-domain

Front-end configuration:

jsonp:
Using script tags to request data (not recommended) is problematic: only GET requests can be sent, and receiving data and configuration is cumbersomeCopy the code
Cross-domain configuration using Node middleware Proxy (this is only about proxy configuration in Vite)
Node Proxy cross-domain schematic diagram

Vite. Config. Js
Proxy: {1. If a request/API/XXX is sent, the request block/API '/ API ': {2. Path forward, and the request address into http://localhost:5001/api/xxxx target: 'http://localhost:5001' changeOrigin: True,// The request changes the source, at which point nginx can obtain the actual request IP 3. Path to rewrite the request into http://localhost:5001/xxxx at this time, the path, the replace (/ ^ / API /, ' ') - > will be asked to address the API to in addition to rewrite: (path) => path.replace(/^/ API /, ' ')}}Copy the code
Description:
Request intercept prefix, such as the address http://localhost:5001/api note: Interception is performed only when the requested domain name is http://localhost:5001/ (the start address of your local page). For example, http://8.135.1.141/api will not be interception. Therefore, if you need to configure cross-domain configuration, you are advised to write the URL as follows: Set VITE_APP_BASE_URL = '/ API 'in.env.serve-devCopy the code

Back-end configuration across domains (here for The Java backend)

Configuring cross-domain at the gateway (Spring-gateway)
spring: cloud: gateway: globalcors: corsConfigurations: '[/**]': # allow to carry authentication information # allow cross-domain sources (site domain/IP), set * to all # allow cross-domain request head field, set * to all # allow cross-domain method, default to GET and OPTIONS, Allow-credentials: true allowed-origins: "*" allowed-headers: "*" allowed-methods: - OPTIONS - GET - POST - PUT - DELETE #max-age: 3600Copy the code
If it is just a Java service, there is no gateway
Add @crossorigin to controller as @crossorigin public class TestController {}Copy the code

Note that only one gateway cross-domain configuration and one service cross-domain configuration can be written or multiple cross-domain configuration problems will be reported

Configuring cross-domain and page compression with Nginx (recommended)

Paste the nginx configuration from vue3-admin-template here
[root@iZwz9izs4qf3b81quqwp61Z http]# nginx-gzip-cors.conf server { listen 80 ; Vvue3-admin-template {vvue3-admin-template {vvue3-admin-template {vvue3-admin-template; # Minimum compressed file size gzip_min_length 1k; Gzip_buffers 4 16k; Gzip_http_version 1.0; # compression level (1M can be compressed to about 300K, improve the home page loading speed) The default compression type already contains text/ HTML, so there is no need to write it below. There will be no problem writing it, but there will be a WARN. gzip_types text/plain application/x-javascript application/javascript text/javascript text/xml text/css; Support for the Vary Header, which allows the front-end cache server to cache gzip-compressed pages; gzip_vary on; root /opt/nginx/html; index index.html;; } # location ^~/micro-service-api/ {proxy_pass HTTP:/ / 8.135.1.141:10156 /;# to Allow the request header add_header 'Access - Control - Allow - the Methods'' GET OPTIONS, POST, PUT, DELETE 'always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Origin' '$http_origin' always; add_header Access-Control-Allow-Headers $http_access_control_request_headers; add_header Access-Control-Max-Age 3600; Proxy_set_header Host $Host; proxy_set_header X-Real-Ip $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_connect_timeout 1000; proxy_read_timeout 1000; If ($request_method = OPTIONS) {return 200; } } location /file/{ root /opt/nginx/html; }}Copy the code
Conclusion:

Cross-domain configuration of front-end proxy: If the back-end and Linux servers are not configured, run dev

Advantages: The front-end can be configured across domains independently without relying on the back-end. Disadvantages: During front-end debugging, the path of the page is localhost, and the real address of the request cannot be directly obtained. Therefore, better debugging is not possibleCopy the code

Backend cross-domain configuration: used when no service is not on the nginx server –>dev,prod environment can be used;

Nginx cross-domain configuration (recommended) : non-invasive to the original development code, and high efficiency, especially nginx compression configuration greatly improves the first page load speed –>dev,prod;

Suggestions: Configure the cross-domain sequence: nginx-> back-end (gateway -> Service) -> Web

Nginx, backend, and Web configuration can only be configured on one side of a cross-domain, otherwise the browser will report multiple cross-domain header problems