The same origin policy is restricted by the browser. Sameoriginpolicy is a convention that prevents data from being easily accessed by other websites for security reasons

The same origin policy prevents javascript scripts in one domain from interacting with content in another domain

Cross-domain same-origin (the protocol, domain name, host, and port number are the same). If any of them are different, cross-domain is triggered

The solution

JSONP

JSONP is a common way for servers and clients to communicate across sources. The biggest feature is simple to apply, good compatibility (compatible with low version IE), the disadvantage is only support GET request, do not support POST request.

JSONP implements cross-domain requests simply by dynamically creating

JSONP consists of two parts: callback functions and data. The callback function is the function that should be called in the page when the response arrives. The name of the callback function is usually specified in the request. The data is the JSON data passed into the callback function.

Create the

Front-end Vue development patterns cross domains

Add proxy Settings to vue.config.js file

DevServer: {port: 4399, host: "localhost", HTTPS: false, open: true,// Vue project startup automatically open browser // hotOnly: // Overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: {// overlay: { {// is the proxy identifier used to tell node that the/API in front of the URL is the proxy target: "http://localhost:4399",// the target address, usually refers to the background server address changOrigin: PathRewrite: {// pathRewrite replaces "^/ API "in the actual Request Url with ""}}}},Copy the code

The node back-end cors

// CORS is a W3C standard, which stands for cross-origin Resource Sharing.Copy the code

Cross-domain permission can be enabled for back-end services

Const urlArray = ['http://localhost:4399', 'http://localhost:4400', 'http://127.0.0.1:4401', 'http://localhost:4402', NGINX_URL, NGINX_URL_TLS]; app.use(cors({ origin: function (ctx) { // let url = ctx.header.referer.substr(0,ctx.header.referer.length - 1); console.log(ctx.url); console.log('cors',ctx); // return urlArray return "https://localhost.cn:443" }, maxAge: 5, credentials: true, allowMethods: ['GET', 'POST', 'DELETE'], allowHeaders: ['Content-Type', 'Authorization', 'Accept'], exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'], }))Copy the code

Nginx cross-domain

The nginx reverse proxy requests to the address that the backend allows access to, thereby solving the cross-domain problem. It is also easy to manage, and server security issues. Nginx can act as a gateway to broker a variety of business requirements

location ^~/api/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forworded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:4399/; # back end interface address}Copy the code

nginxConfigure article links:Juejin. Cn/post / 706963…