若依前端用$.ajax调外部接口，url如何设置成默认vue.config端口地址加接口地址

若使用 Vue CLI 创建的项目，可以通过在 `vue.config.js` 中配置代理来实现将请求转发到后端接口。具体来说，可以在 `vue.config.js` 中添加如下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端接口地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 将请求地址中的 /api 替换为空字符串
        }
      }
    }
  }
}

接着，在前端通过 `$.ajax` 调用后端接口时，只需要将请求地址设置为 `/api/xxx` 即可，如：

$.ajax({
  url: '/api/login', // 将请求地址设置为 /api/login
  type: 'post',
  data: { username: 'xxx', password: 'xxx' },
  success: function(data) {
    console.log(data)
  }
})

相关问题

vue使用ajax的跨域问题

Vue 使用 AJAX 的跨域问题可以通过设置后端接口的 CORS 来解决。CORS 是一种机制，它使用一些 HTTP 头来让浏览器与服务器进行安全的跨源数据传输。在后端接口中设置如下 CORS 头：

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

其中，`Access-Control-Allow-Origin` 设置为 `*` 表示允许所有来源的请求。`Access-Control-Allow-Methods` 设置允许的 HTTP 方法，`Access-Control-Allow-Headers` 则设置允许的 HTTP 头。

除此之外，还可以在 Vue 的 Ajax 请求中设置 `withCredentials: true`，表示跨域请求时携带 cookie，需要后端支持。同时，也可以在请求头中添加 `Authorization` 等自定义的 HTTP 头信息。

axios.get(url, {
  withCredentials: true,
  headers: {
    Authorization: 'Bearer ' + token
  }
}).then(res => {
  console.log(res.data)
})

需要注意的是，在开发环境中，由于 Vue 开发服务器与后端服务器可能运行在不同的端口上，也会存在跨域问题。可以在 `vue.config.js` 中配置代理解决跨域问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

以上代码的意思是，在开发环境中，将所有以 `/api` 开头的请求转发到 `http://localhost:3000`，并将请求头的 `Host` 字段设置为转发目标的主机名。

vue2.0_前端跨域

Vue.js是一个流行的前端框架，用于构建用户界面。在开发过程中，经常会遇到跨域的问题。跨域是指在浏览器中，通过AJAX请求时，请求的目标资源与当前页面的域名、端口或协议不一致。

解决Vue.js跨域问题有多种方法，以下是其中一种常用的方法：

1. 代理服务器方法：
- 在Vue项目的根目录下创建一个vue.config.js文件（如果不存在）。
- 在vue.config.js文件中添加以下代码：

     module.exports = {
       devServer: {
         proxy: {
           '/api': {
             target: 'http://api.example.com', // 实际请求的目标地址
             changeOrigin: true,
             pathRewrite: {
               '^/api': '' // 重写请求路径，去掉/api前缀
             }
           }
         }
       }
     }

- 将上述代码中的"http://api.example.com"替换为你实际请求的目标地址。
- 重启Vue项目，在前端代码中使用`/api`前缀来代替实际请求的域名部分。
- 例如，原本的请求地址为`http://api.example.com/getData`，现在可以改为`/api/getData`。
- 这样，所有以`/api`开头的请求都会被代理到"http://api.example.com"。

这只是其中一种解决Vue.js跨域问题的方法，还有其他方法，如JSONP、CORS等。具体方法选择可以根据你的需求和后端接口的支持情况来决定。