1. Concept
1. Browser's homologous policy
A strategy that browsers follow to ensure the security of resources.
2. Source
Source = Protocol + Domain + Port
3. Homologous and non-homologous
When the two sources are the same only when their protocol, domain name, and port are the same, they are the same origin, otherwise they are non-homologous.
4. Homogen and non-homogenic requests
If the request is sent from the same source, it is a same source request, and if the request is sent from the non-same source, it is a non-same source request.
5. Cross-domain
If [source] is inconsistent with [target source], it will lead to cross-domain.
2. What restrictions will the browser impose on cross-domain
[Source A] and [Source B] are non-homologous, so the browser will have the following restrictions.
1. DOM access restrictions
[Source A] script cannot read and operate the DOM of [Source B]
2. Cookie access restrictions
[Source A] cannot access [Source B] cookies
3. Ajax response data limitations
[Source A] can send a request to [Source B], but cannot obtain the returned data of [Source B]
3. Pay attention
Cross-domain restrictions only exist on the browser side, and server side does not exist on the cross-domain restrictions.
It is instantly cross-domain, and Ajax requests can also be issued normally, but the response data will not be handed over to the developer.
<link>, <script>, <img>...Requests issued by these tags may also be cross-domain, but the browser does not strictly restrict the tags and has almost no impact on development.
4. CORS solves cross-domain
CORS is Cross-Origin Resource Sharing. CORS is a mechanism that allows web application servers to perform cross-domain access control, allowing resources to be shared between websites of different sources to be securely shared.
By default, for security reasons, browsers restrict the acquisition or operation of resources from scripts loaded from one source (protocol, domain, port). CORS provides a secure way for web applications to bypass the limitations of this homologous policy.
Using CORS to solve cross-domain is the most orthodox way, and requires the server to be "own"
1. Simple and complex requests
Simple request
Request method:GET、HEAD、POST
Content-type：text/plain、multipart/form-data、application/x-www-form-urlencoded
The request header field complies with the CORS Security Specification, and as long as you change the request header, it becomes complicated.
Complex request
Either a simple request or a complex request, a complex request will automatically send a pre-flight request.
2. Resolve simple requests
Taking nodeJS as an example, the server side sets the response header Access-Control-Allow-Origin, which represents the source of the sending request. As long as the request sent from this source is passed. A value of "\*" means that all requests from different sources are passed.
("/xxx", (res, req) => {
("Access-Control-Allow-Origin", "Send request source" | "*");
();
});3. Resolve complex requests
Taking nodeJS as an example, the server sets the response header, which corresponds to the request header one by one, and uses the cors plug-in.
(
cors({
origin: "xxx", // Allow source methods: ["GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"], // Allow method allowedHeaders: ["xxx"], // Allowed custom headers exposedHeaders: ["xxx"], // Response head to be exposed })
);
("/xxx", (res, req) => {
("xxx", "xxx");
();
});V. JSONP solves cross-domain
JSONP uses the <script> tag to load scripts across domains without being strictly restricted by schema.
1. Basic Process
first step:Create a script tag, setting src to the url for cross-domain requests. At the same time, prepare a callback function, which processes the returned data.
Step 2:After the server accepts the request, encapsulates the data in the callback function and returns it.
Step 3:The client callback function is called, and the data is passed into the callback function as parameters.
2. Example
Server code
let list = [1, 2, 3];
("/table", (req, res) => {
const { callback } = ;
(`${callback}(${(list)})`);
});Client Code
function test(data) {
(data);
}
function getTable() {
const script = ("script");
= () => {
();
};
= ":8080/table?callback=test";
(script);
}6. Configure agents to solve cross-domain
1. Configure the proxy server yourself
Configure the proxy with http-proxy-middleware
const { createProxyMiddleware } = require("http-proxy-middleware");
(
"/api",
createProxyMiddleware({
target: "",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
})
);2. Use Nginx to build a proxy server
2.1 Setting the response header
server {
listen 80;
server_name your_domain.com;
location /api/ {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass http://your_backend_server;
}
}2.2 Reverse proxy
Proxy cross-domain requests to the target server via Nginx, allowing the browser to consider them to be homologous requests.
server {
listen 80;
server_name ;
location /api/ {
proxy_pass ;
}
}3. Scaffolding Server
For example, the configuration file in vue3The address of the proxy can be configured
import { defineConfig } from "vite";
// /config/
export default defineConfig(() => {
return {
server: {
host: "127.0.0.1",
port: 8081,
strictPort: false,
open: true,
proxy: {
"/dev-api": {
target: "http://localhost:1112",
changeOrigin: true,
rewrite: (path) => (/^\/dev-api/, ""),
},
},
},
};
});Summarize
This is the end of this article about cross-domain solutions for classic front-end JS problems. For more related front-end JS cross-domain solutions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!