vue2本地代理proxy 接口404

vue2+vueCli4 未使用vue-router
接口地址 [https://api.role.cn/v2/users/common_info?role_id=3f2e04d9-213a-4374-af42-19c92af7ae59]

vue.config.js文件内写本地代理proxy 接口报错404（接口地址确认正确，另一个项目是好的。logLevel: 'debug'开启看到服务器地址也是正确的。）

换成config文件夹下的index.js文件写本地代理proxyTable，
接口请求成功状态为200，但没有正确返回数据，返回信息提示为“We’re sorry but XX doesn’t work properly without JavaScript enabled. Please enable it to continue.”

axios：

404：

package.json:

可以参考看看这几篇文章：
https://blog.csdn.net/heshuncheng/article/details/107927727
https://blog.csdn.net/JankoY/article/details/122489886

引用chatGPT作答，对于第一个问题，可以尝试检查一下代理配置是否正确，例如确保代理地址和端口正确，还可以在浏览器中尝试手动访问代理地址，确认代理是否正常工作。此外，也可以尝试使用其他的代理工具，例如Fiddler或Charles等，来检查请求和响应的详细信息，看看是否存在其他问题。

对于第二个问题，错误信息提示为“XX不支持没有启用JavaScript的情况”，通常意味着后端API返回的数据格式不正确，无法被前端正确解析。这个问题可能需要通过检查后端API返回的数据格式和前端代码中的数据解析逻辑来解决。您可以在浏览器的开发者工具中查看API的响应，确认API返回的数据格式是否正确。如果API返回的数据格式正确，那么您可以检查前端代码中的数据解析逻辑，看看是否有问题。可能需要查看具体的代码实现，才能确定具体问题所在。

该回答引用GPT
这个问题可能和后端返回的数据格式有关。前端使用代理proxy请求接口时，要确保后端返回的数据格式正确，包括数据类型和数据结构。建议在后端API接口中增加对应的响应头，例如Content-Type应该设置为application/json，以确保前端能够正确解析返回的数据。如果问题依然存在，可以尝试手动请求接口，查看返回数据的格式和内容。

引用chatgpt部分指引作答：
这个问题可能是因为你的代理配置没有正确地将请求转发到你的后端服务器。请检查你的代理配置是否正确，并确保你的后端服务器正在正确地响应请求。

如果你使用的是vue-cli 4的话，你可以在vue.config.js文件中配置代理，如下所示：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这个配置会将所有以/api开头的请求转发到http://localhost:3000
服务器上，并将路径中的/api删除。例如，/api/user请求会被转发到http://localhost:3000/user

如果你使用的是config文件夹下的index.js文件来配置代理，可以按照以下方式配置：

module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在这个配置中，/api请求同样会被转发到http://localhost:3000
服务器上，并将路径中的/api删除。

如果你的代理配置没有问题，但是返回的数据不正确，可能是因为你的后端服务器返回的数据格式不正确。请检查你的后端服务器代码，确保它正确地处理请求并返回正确的数据格式。

如果你已经确认代理地址是正确的，并且使用logLevel: 'debug'确认请求已经被正确地转发到后端服务器了，那么可能是后端服务器没有正确地处理请求。

关于config文件夹下的index.js文件写本地代理proxyTable的问题，返回信息提示为“We’re sorry but XX doesn’t work properly without JavaScript enabled. Please enable it to continue.”的原因可能是因为你的后端服务器返回了一个错误的页面，该页面要求启用JavaScript才能正常工作。这个问题通常是由于后端服务器的CORS配置不正确导致的。

你可以通过在后端服务器的响应头中添加CORS头部来解决这个问题。在后端服务器的响应头中添加以下CORS头部：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

这些头部将允许任何域名发送跨域请求，并允许使用常见的HTTP方法和请求头。

如果你的后端服务器不支持添加CORS头部，你可以尝试使用第三方的CORS中间件，如cors或cors-anywhere，将请求转发到后端服务器，并在中间件中添加CORS头部。

来自chatgpt
对于第一个问题，如果接口地址确认正确并且服务器地址也是正确的，可以尝试检查本地代理配置是否正确，包括检查代理目标和路径是否正确设置。此外，还可以检查启用的中间件（如body-parser和cors）是否正确安装和配置。

对于第二个问题，返回的信息提示为“XX doesn't work properly without JavaScript enabled”通常表明浏览器禁用了JavaScript。您可以尝试在浏览器中启用JavaScript，或者检查您的代码是否正确处理了JavaScript的加载和执行，以确保页面能够正常工作。此外，由于您使用了本地代理，请确保代理目标服务器支持JavaScript。

代理写错了，不知道你哪写错了，看不到，大概率拼错了什么，proxy pass

看起来你的代理设置是正确的，但返回的数据不是你所期望的格式，是一个HTML页面，而不是JSON数据。这可能是因为代理服务器返回了错误的HTTP响应（如404）或代理服务器本身具有一个错误的配置。

根据你提供的信息，我建议你尝试使用 http-proxy-middleware 库来设置代理。以下是一个示例设置：

首先，在终端中运行以下命令安装 http-proxy-middleware：
```
npm install http-proxy-middleware --save-dev
```

编辑项目根目录下的 vue.config.js 文件，在其中添加以下内容：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'https://api.role.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/v2'
        },
        router: {
          // 如果你想在本地模拟一个 API，可以用以下方式指定目标地址和端口
          'localhost:8080': 'http://localhost:3000',
        },
        onProxyReq(proxyReq, req, res) {
          // 可以在此处修改请求头信息
          proxyReq.setHeader('Authorization', 'Bearer YOUR_AUTH_TOKEN');
        },
        onError(err, req, res) {
          console.error('proxy error:', err);
          res.writeHead(500, {
            'Content-Type': 'text/plain'
          });
          res.end('Something went wrong.');
        },
        logLevel: 'debug' //如果需要查看详细日志，可以开启该选项
      }
    }
  }
};

上述代码中的 proxy 将所有以 /api 开头的请求代理到了 https://api.role.cn/v2，并使用了 changeOrigin 以确保跨域请求正常工作。pathRewrite 选项可以让你更改实际请求路径，例如将 /api/users 重写为 /v2/users，注意需要与实际接口地址保持一致。

这里还添加了一个 router 配置对象，可以用来指定本地开发时使用的目标地址和端口，以便在不同的环境中使用不同的代理服务器。如果你不需要指定本地目标，可以省略 router。

onProxyReq 方法允许你修改请求头信息，例如添加 Authorization 访问令牌。

onError 方法可以在代理发生错误时自定义返回信息。

logLevel 选项可以用于配置调试日志的详细程度。

保存并退出 vue.config.js 文件
重新启动开发服务器，运行以下命令：
```
npm run serve
```
确保终端输出日志中没有错误，然后再尝试访问你的接口路径。如果一切正常，你应该能看到正确的JSON数据。

希望这可以帮助你解决问题。如有任何问题，请随时回复我。

检查一下，代理地址是否正确