How to solve the problem that the session changes every time you request the session

Vue front and back end separation every time the session changes

Because the front and back ends belong to different domains, the server will be accessed as a new user every time the ajax request server is accessed, resulting in the session loss

Solution

 <>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:8080" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true"/>
      </customHeaders>
    </httpProtocol>
  <handlers>
</>

Adding cross-domain to the backend,

<add name="Access-Control-Allow-Origin" value="http://localhost:8080" />

The value here writes the front-end address

Then change the front-end ajax request. I use axios in the global configuration of axios

=true;

This sentence means that every time you request, you will bring a cookie, so that every time you get the backend, you will not be considered to be a different user, causing the session to be lost. Oh!

Vue front and back end separation session is lost, front-end solution method

Background: Each time the front-end sends ajax, a new session is formed. During local testing, the back-end gets the sessionId as null

Please look for other articles for modifying the code of the backend. This article only involves the frontend.

1. Solve that every time the front-end sends ajax, it forms a new session.

I'm using axios, just add it when encapsulated request

=true;

Just make corresponding changes according to your own code. Add the withCredentials attribute when requesting, and the value is true.

withCredentials: true; carry cookies when requesting

2. The local test result is still unsuccessful. The sessionId obtained by the backend is null

Backend returns cookies

Set-Cookie: SESSION=NzgyMDdjZDgtNjJhMC00NmNkLTkxNWYtNjE4ZmRkYmFlOWQy; Path=/xxx/;

There is also a path=/xxx/ after the cookie, that is, the backend project path.

Just need to set up proxy for cross-domain solution

Original code:

devServer: {
    proxy: {
      '/dev-api/': {
        target: ':8811',
        changOrigin: true,
        pathRewrite: {
          '^/dev-api/': '/'
        }
      }
    }
  }

Change to the beginning of /dev-api/ to the backend return to the beginning of path

After modification:

devServer: {
    proxy: {
      '/xxx/': {
        target: ':8811',
        changOrigin: true,
        pathRewrite: {
          '^/xxx/': '/'
        }
      }
    }
  }

The above is personal experience. I hope you can give you a reference and I hope you can support me more.