Four solutions to cross domain problems

More , Please visit mine Personal blog .

---

Preface

unbelievable , I have been tormented by cross domain problems all morning . I believe many programmers have encountered cross domain problems , Of course , There are many solutions . But I tried countless ways today , Still unresolved . Until finally my daughter-in-law gave me a hint , Will cross domain problems be just appearances , real bug Elsewhere . later , After my careful investigation , It turns out that PhalApi A small problem in the framework , Cross domain error reports are triggered （ At the end of the article PhalApi What are the problems in the framework ）. Then I'll take this opportunity , Let's talk about cross domain issues , And what are the common solutions .

What is cross-domain

What is a happy planet , Bah , What is cross domain ？

simply , Cross domain refers to the request for resources of another domain name from the web page of one domain name . For example, from Baidu (baidu.com) Page to request my blog (blog.pangao.vip) Resources for . But because of The same-origin policy The relationship between , Generally, such direct access is not allowed .

What is homology strategy

blunt , Homology is protocol 、 Domain name and port are the same .

URL1	URL2	explain	Is it homologous
http://blog.pangao.vip/a.js	http://blog.pangao.vip/123/b.js	agreement 、 domain name 、 All ports are the same	Homology
http://blog.pangao.vip/a.js	https://blog.pangao.vip/b.js	Different agreements , Domain name and port are the same	Not homologous
http://blog.pangao.vip/a.js	http://pangao.vip/b.js	Domain name is different , The protocol and port are the same	Not homologous
http://blog.pangao.vip:80/a.js	http://blog.pangao.vip:8080/b.js	Different ports , The domain name and protocol are the same	Not homologous

Why do we have a homologous strategy

Just imagine , If you just input your account number and password in online banking , I checked myself and 1 Thousands of dollars , Then visit some unruly websites , This website can visit the online banking site just now , And get the account and password , The consequences can be imagined . therefore , In terms of security , The same origin strategy is beneficial to protect the website information .

Why cross domain

However , In some cases , We need cross domain access . such as , Programmers develop websites , You may need to access the server's data locally . Another example is that of a company A page (a.pangao.vip) It may be necessary to obtain B page (b.pangao.vip).

Cross domain problems 4 Kind of solution

1、 Browser plug-in

Google browser has a plug-in that allows cross domain Allow CORS: Access-Control-Allow-Origin. This plug-in can be used in web Easy cross domain execution in applications Ajax request . Please note that , When adding an add in to the browser , By default, it is inactive （ The toolbar icon is gray C Letter ）. If you want to activate the add in , Please click the icon on the toolbar . The icon will turn orange C Letter .

If you don't have a ladder , Google can't open , Then please try this Allow CORS: Access-Control-Allow-Origin . Download plug-ins from third-party websites , Then install it offline to Google browser .

2、web Server software

With Nginx For example , Only need Nginx Configure the following parameters in the configuration file of ：

location / {  
    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;
    }
} 

3、 Back end frame operation

With PHP For example , Just add the following code at the beginning of the file ：

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:OPTIONS, GET, POST');
header('Access-Control-Allow-Headers:x-requested-with');

Because I use PhalApi frame , According to this course operation , You can easily solve cross domain problems .

4、 Front end frame operation

With Vue For example , modify vue.config.js The documents are as follows ：

devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    overlay: {
        warnings: false,
        errors: true
    },
    proxy: {
        '/api': {
            target: 'http://blog.pangao.vip',
            ws: true,
            changOrigin: true,
            pathRewrite: {
            '^/api': ''
            }
        }
    }
}

When needed http://blog.pangao.vip The place of , All use api replace , For example, modify .env.development The documents are as follows ：

VUE_APP_BASE_API = 'api'

Postscript

Last , Say again PhalApi Problems in the framework . Used to PhalApi Frame friends must know ,url The route access method is ：

http://dev.phalapi.net/?service=App.Usre.Login

But for some reason , I need to access ：

http://dev.phalapi.net/App/User/Login

Of course ,PhalApi The official website of the framework also clearly describes what needs to be done , To achieve this effect . As a result, I forgot to set .

ending

The daughter-in-law said that one is one , I have developed my career and fly a plane ;
The daughter-in-law said five is five , Only in this way can I drive a Land Rover .

---

More programming teaching, please pay attention to the official account ： Pangao will accompany you to learn programming

---