Reference website:

vue cli: cli.vuejs.org/zh/

axios: github.com/axios/axios

Install axios

  1. Install AXIos NPM I AXIos in the project folder, for example:

  2. Import and apply axios, for example:

    / / import
import axios from 'axios'

/ / application
async function getNews(){
const resp = await axios.get('https://www.zhihu.com/api/v3/feed/topstory/hot-lists/total?limit=50&desktop=true')
}
getNews();
Copy the code

  3. Run project NPM Run serve

  4. A cross-domain problem occurs

Why do cross-domain problems arise

What we are currently requesting is the front-end development server, which is set up by vue-CLI scaffolding, which is set up with Webpack.

The browser requests the front-end development server flow:

  1. The browser type http://localhost:8080/ to request the front-end development server

  2. The front-end development server returns a page

  3. The browser renders the page, looks at the source code of the page and finds only one JS, and the browser requests js

  4. Js has ajax requests, and the other server we request, usually the backend test server (which contains the test data), will give an address such as http://test-data:3000/api/news

  5. If the protocol, domain name, or port number of the access path on the current page are inconsistent with that of the interface requested on the current page, cross-domain may occur. For example, the following example shows that the inconsistency between the domain name and port number causes cross-domain

    Current page: http://localhost:8080/

    The current page request interface: http://test-data:3000/api/news

  6. Although it is cross-domain, the backend test server still gives the data, and the browser finds that there is cross-domain. For security, it will prevent the data from being given to JS, and JS cannot get it and will report an error.

  7. As a result, development environments cross domains, whereas production environments generally do not

Why is the production environment not cross-domain

The real story:

  1. After we developed the project, we packed it into the dist directory under the project folder, which contained pure static HTML files, such as JS, CSS,
  2. These are uploaded to a server that can not only hold static resources but also provide apis
  3. Once the server is deployed, users just need to access ithttp://www.my-site.comYou can access the real server
  4. The server will give us a page, page inside js, CSS
  5. You get the JS, you run the JS, there’s an Ajax request in the JS, and you’re still asking for thishttp://www.my-site.com/api/new, the same protocol and domain name, so, do not generate cross-domain

How to solve cross-domain problems in development environments

Set the agent

How the browser requests data:

  1. The browser asks the development server, gets the page, asks for js.
  async function getNews(){
  const resp = await axios.get('https://localhost:8080/api/')
   }
   getNews();
Copy the code

  1. The development server sets up the function, turns it into a proxy, and when it sees this address it forwards it to the backend test server. There is no cross-domain between servers, cross-domain only happens to the browser

  2. How to set up the proxy

    (1) Create the configuration file vue.config.js in the root directory of the project file (this is the vue-CLI configuration file)

    module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target:'https://www.zhihu.com'}}}}Copy the code

    That’s how you get the data

Flow chart:

  1. Browser requests the development server when no cross-domain (http://localhost:8080/…).

  2. The development server finds that its path starts with “/ API”

  3. The development server then forwards this request to Zhihu server, and the development server requests https://www.zhihu.com, the path remains unchanged

  4. The development server takes the data and gives it to the browser

supplement

  1. The request can omit the protocol, hostname, and port number. Omit the protocol using the protocol of the current site, and the hostname and port number using the hostname and port number of the current page

    async function getNews(){
   const resp = await axios.get('/api/v3/feed/topstory/hot-lists/total? limit=50&desktop=true')}Copy the code