Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study

1. Set CORS response header to achieve cross-domain

Cross-Origin Resource Sharing (CORS)

1.1 What is CORS

CORS (Cross-Origin Resource Sharing), cross-origin resource sharing. CORS is the official cross-domain solution. Its feature is that it does not require any special operations on the client and is completely processed on the server. It supports get and post requests. The Cross-Origin Resource Sharing standard adds a set of HTTP header fields that allow servers to declare which origins have access to which resources through browsers.

1.2 How does CORS work?

CORS sets a response header to tell the browser that the request is allowed to cross domains. After receiving the response, the browser will release the response.

1.3 What is CORS used for?

insert image description here

ajaxDemo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>Send Request</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function () {
            //1. Create object const x = new XMLHttpRequest();
            //2. Initialization settings x.open("GET", "http://127.0.0.1:8080/cors-server");
            //3. Send x.send();
            //4. Bind event x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        document.getElementById('result').innerText = x.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

insert image description here

server.js

//1. Import express
const express = require('express');

//2. Create application object const app = express();
 
//3. Create routing rules // request is the encapsulation of the request message // response is the encapsulation of the response message app.all('/cors-server', (request, response)=>{
    //Set the response header response.setHeader("Access-Control-Allow-Origin", "*"); // Allow all cross-domain requests* 
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // Allow specified requests to cross domains // response.setHeader("Access-Control-Allow-Headers", '*'); // Allow custom request header tags // response.setHeader("Access-Control-Allow-Method", '*'); // Allow all requests to cross domains *
    // response.setHeader("Access-Control-Allow-Method", 'get'); // Allow get requests to cross domain response.send('hello CORS');
});


//4. Listening port to start service app.listen(8080, () => {
    console.log("The service has been started, port 8080 is listening....");
});

Start the service nodemon server.js

insert image description here

Running results:

insert image description here

This is the end of this article about Ajax cross-domain solution and setting CORS response header to achieve cross-domain case details. For more relevant Ajax cross-domain solution content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Three-level linkage provincial and municipal ajax code
JSON, AJAX, Maven Basics
Ajax login verification implementation code
Ajax realizes the linkage between provinces, cities and districts
jQuery+Ajax to achieve simple paging effect
Preliminary implementation of Ajax (using vscode+node.js+express framework)
How to use AJAX to obtain Django backend data
Detailed explanation of the parsererror error case in JavaScript solution in ajax

<<: Implementation of docker redis5.0 cluster cluster construction

>>: Migrate virtual machines between VMware Workstation and vSphere (picture and text)

Summary of using MySQL online DDL gh-ost

Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study

1. Set CORS response header to achieve cross-domain

1.1 What is CORS

1.2 How does CORS work?

1.3 What is CORS used for?

Summary of using MySQL online DDL gh-ost

How to change the host name in Linux

mysql: [ERROR] unknown option '--skip-grant-tables'

How to deploy stand-alone Pulsar and clustered Redis using Docker (development artifact)

js canvas to realize the Gobang game

MySQL 5.7.18 download and installation process detailed instructions

Modify the default color of the input box placeholder text -webkit-input-placeholder method

The order of event execution in the node event loop

Details of MutationObServer monitoring DOM elements in JavaScript

How to use vw+rem for mobile layout

Recommend

How to mount a new disk on a Linux cloud server

Practice of realizing Echarts chart width and height adaptation in Vue

Detailed explanation of KVM deployment of three virtual machines to implement WordPress experiment

How to run nginx in Docker and mount the local directory into the image

Understand the difference between BR and P tags through examples

CSS 3.0 text hover jump special effects code

Detailed explanation of the practice of installing the Permeate range system using VMware

Sharing of research experience on using characters instead of rounded corners and sharp corners

js to realize the function of uploading pictures

Common CSS Errors and Solutions

Detailed explanation of the relationship between image format and design in web design

How to install Jenkins on CentOS 8

Detailed explanation of :key in VUE v-for

Docker View the Mount Directory Operation of the Container

JS Decorator Pattern and TypeScript Decorators