How to solve cross-domain problems (CORS) in vue

There are multiple ways to solve cross-domain issues in Vue. Here are a few common methods:

1. Proxy server: In the development environment, you can configure a proxy server to forward API requests and bypass the browser's same-origin policy. You can use http-proxy-middlewaremiddleware such as to implement proxy configuration. vue.config.jsConfigure in the file, the example is as follows :

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

The above configuration forwards all /apirequests starting with http://api.example.com.

In the above example, pathRewrite does not need to be written, for example:

    devServer: {
      open: true,
      port: 8080,
      // headers: {},
      host: 'test.meditrusthealth.com',
      disableHostCheck: true,
      https: true,
      proxy: {
        "/gwkf": {  // "/gwky" 是后端的服务名，地址后端以它为开头的
          target: "https://baidu.com/", //你需要访问的网址 
          changeOrigin: true,
        },
         // 像这种可以配置多个，后端会有多个服务名的情况
         // 首先我们需要获取到后端的服务名，就是需要代理的服务名，这个我们可以通过swagger，来找到
         // 第二点，我们需要找到请求路径，如果是测试环境(开发环境)，就用测试环境、生产环境就用生产环境的路径。
         // 然后就在target里面，添加上域名就可以了
         // changeOrigin 要为true，意思就是：当进行代理时，Host 的源默认会保留
        // （即Host是浏览器发过来的host），
        // 如果将changeOrigin设置为true，则host会变成target的值；在vue-cli3中，
        // 默认changeOrigin的值是true，意味着host设置成target，这与cue-cli2不一致，
        // vue-cli2这个默认值是false。

        "fast-admin": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },

        "fast-service": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },

        "mth-core-service": {
          target: "https://test-masterdata.com/",
          changeOrigin: true,
        },

        "mth-core-admin": {
          target: "https://test-masterdata.com/",
          changeOrigin: true,
        },

        "mth-capital-service": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },


        '/fast-provide': {
          target: 'https://test-mobile.com', 
          secure: false,
          changOrigin: true,
          logLevel: 'debug'
        },
      }
    },

2. JSONP: If the backend supports JSONP cross-domain requests, you can use the JSONP library in Vue (such as vue-jsonp) to send cross-domain requests.

3. CORS: The backend service sets appropriate CORS header information in the response to allow specific sources (including ports and protocols) to access the interface. Initiate cross-domain requests directly in Vue, and the backend handles cross-domain issues.

4. WebSocket: If you need to communicate cross-domain in Vue with a server that supports WebSocket, you can use the WebSocket API to connect and communicate. WebSockets are not subject to the same-origin policy.

It should be noted that the above method is suitable for solving cross-domain problems in a development environment. In a production environment, appropriate cross-domain policies should be configured by the backend to ensure security.

Please choose the appropriate solution based on your specific situation. If you need more detailed instructions or code examples, please provide a more specific question or scenario.

Extended question, how does the front-end solve cross-domain issues in the production environment?

In a production environment, the front-end has limited ways to solve cross-domain issues because the browser's same-origin policy restricts cross-domain access. Here are some possible ways:

1. Through a backend proxy: In a production environment, cross-domain requests can be made through a backend server. The front-end sends the request to the back-end interface in the same domain, and then the back-end server proxies to the target interface. In this way, front-end requests follow the same-origin policy and will not cause cross-domain problems.

2. CORS (Cross-Origin Resource Sharing): If you have permission to control the backend interface, you can set CORS header information on the backend to allow specific sources (including ports and protocols) to access the interface. By setting the appropriate CORS headers in the response, the browser will allow cross-domain access to the front end.

3. JSONP (GET requests only): If the backend supports JSONP, you can use JSONP to make cross-domain requests. JSONP takes advantage <script>of the fact that tags are not restricted by the same-origin policy and dynamically creates <script>tags on the front end to request cross-domain interfaces.

It should be noted that in a production environment, due to security and cross-domain restrictions, the source and destination of cross-domain requests should be restricted to avoid unnecessary security risks. Please work with your backend developer to choose the right solution based on your specific needs and security policies.