The cookie of Chrome cannot be carried across domains

background

I was happy to upgrade The Chrome browser, but found that the project login of local run kept reporting errors. After some data query, I found that the login failed because there was no cookie with authentication information when the local project (Localhost) request interface.

I have encountered this problem several times, both Windows and MAC, specifically summarized the solution.

Cookie policy of Chrome version

The Chrome version	Cookie policy
>= Chrome80	Cannot be carried across domains; Experimental function options can be set to enable cross-domain portability
>= Chrome91	Cannot be carried across domains; The enabling mode of setting options is deleted, but cross-domain portability can be enabled by configuring command parameters
>= Chrome94	Cannot be carried across domains; No way to open it

>=Chrome80

Experimental function options can be set to enable cross-domain portability:

Open the Chrome ://flags/ page
Search for cookies and set SameSite by default cookies and cookies without SameSite must be secure to disabled

Restart the browser

>=Chrome91

Enable cross-domain carrying by configuring command parameters:

Windows configuration

Right – click the Chrome app icon to open the properties panel

Add command parameters to the target field:

--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
Copy the code

Full target field (for reference only) :

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
Copy the code

Restart the browser

MAC configuration

Open a terminal
Enter the command to automatically open the browser:

open -n /Applications/Google\ Chrome.app/ --args --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
Copy the code

In fact, Chrome93 on my Mac didn’t work, for reasons I don’t know.

>=Chrome94

Do not support any way to enable cross-domain portability, you can set the proxy to the same domain, or by installing a lower version of the Chorme.

Set the agent

Assumptions:

Local development domain name: localhost:3000 Request interface: http://mydemo.com/api/**Copy the code

Take vue2 project as an example to set the proxy:

Proxy: {'/ API ': {target: 'http://mydemo.com', changeOrigin: true}}Copy the code

In the final project:

Localhost :3000/ API /** # request localhost:3000/ API /** will eventually be proxy to http://mydemo.com/api/**Copy the code

Localhost :3000 is used in all projects, so there will be no cross-domain problems.

However, in many cases, the interface will only set cookies to specific domain names for security, which requires adding subdomains at development time.

Increase the subdomains

In the example above, if some cookies can only be set under the domain name mydemo.com, then localhost:3000 cannot carry cookies under the domain name mydemo.com. In this case, we need to set the subdomain name. Will be localhost: 3000 point to localhost.mydemo.com: 3000.

Modifying the hosts file (domain name resolution file)

Windows hosts file directory: C:\Windows\System32\drivers\etc\hosts MAC hosts file directory: /private/etc/hosts [shift-command -g]Copy the code

Open the hosts file and add:

127.0.0.1   localhost.mydemo.com 
Copy the code

127.0.0.1 is the local IP address, which is equivalent to localhost. In this case, localhost is directed to localhost.mydemo.com.

In the final project:

Local development domain name: localhost.mydemo.com: 3000 request interface: localhost.mydemo.com: 3000 / API / * *Copy the code

Install multiple versions of Chrome

No matter how Chrome upgrades, I like to use Chrome79 when developing, is happy 🐶.

The following uses Chrome79 as an example to describe how to install one or more versions of Chrome.

Windows

Under Windows versions Chrome download address: www.chromedownloads.net/chrome64win…

Select chrome_WIN64_STABLE_79.0.3945.79 to download.
Do not install it directly. Download and install the 7-zip software first
Right click on the.exe file and select 7-zip – extract it to the current location to extract the Chrome.7z file. Then unzip the Chrome.7z file to extract the Chrome directory
Enter the chrome/ chrome-bin directory, and you will see the chrome.exe file. Need chrome.exe to right click and send to desktop shortcut
Open the desktop of your computer and rename the chrome.exe desktop shortcut to Chrome79.exe for easy differentiation. Right-click to select properties and add parameters to the target field:
```
 --disable-web-security --user-data-dir=D:\ChromeData\MyChromeDevUserData79
Copy the code
```
–user-data-dir: chrome79. Exe Application data storage directory.

–disable-web-security: disables cross-domain security.
Double-click the desktop shortcut Chrome79.exe to open it.

Mac

Under the MAC versions Chrome download address: google-chrome.cn.uptodown.com/mac/version…

Select version 80.0.3987.53 to download (download the corresponding version as required)
Double-click on the DMG file, drag Chrome to the Application folder, and choose to keep both without replacing them
If you open the apps directory, you’ll see two Google Chrome apps, and Google Chrome 2.app is the one you just installed. To be safe, take a look at the introduction.

Although the download is version 80.0.3987.53, the introduction says version 79 (the real version is version 79).
For easy differentiation, rename Google Chrome 2.app to Google Chrome79.app.
Chrome 79 cannot be opened by double-clicking directly. You need to open the terminal and run the following command:
```
open -n /Applications/Google\ Chrome79.app/ --args --disable-web-security --user-data-dir=/Users/XXX/MyChromeDevUserData79
Copy the code
```
/Applications/Google\ Chrome79. App / : program directory, according to actual modification, \ here is an escape character.

–disable-web-security: disables cross-domain security.

–user-data-dir: indicates the directory for storing Chrome data of version 79.
Keep the Chrome 79 app in the dock for later use.