ajax可以跨域吗?

747 阅读2分钟

ajax本身是不能跨域 那么如何解决跨域请求数据?

为什么会出现跨域?

只要域名-端口-协议有一个不同, 就是跨域了~

当下, 最流行的就是**前后分离开发项目,也就是前端项目后端接口**并不在一个域名之下,

那么前端项目开发时, 去访问后端接口就会存在跨域行为.

image.png 解决方案:

1.jsonp---已被淘汰

缺点:只能get请求 比如:文件上传ForData

原理:动态的创建script添加src属性(但是这个请求是异步的) 在页面上声明了一个函数,服务器端返回的是函数调用

2.cors

原理 :在响应头中添加Access-Control-Allow-Origin:*

这里明显跨域了, 但是后台设置了 access-control-allow-origin: *, 允许了跨域 image.png 如果后台开发过程中, 没有配置 cors, 前端可以利用 webpack 开发服务器进行代理, 解决跨域问题

3.反向代理

原理 :服务器与服务器之间数据通信 向本地请求数据,本地服务器向后跳请求响应 image.png

解决开发环境的跨域问题

开发环境的跨域

开发环境的跨域,也就是在**vue-cli脚手架环境**下开发启动服务时,我们访问接口所遇到的跨域问题,

vue-cli为我们在本地**开启了一个服务,可以通过这个服务帮我们代理请求**,解决跨域问题

vue-cli的配置文件即**vue.config.js**,这里有我们需要的 代理选项

image.png


        module.exports = {
          devServer: {
           // 代理配置
            proxy: {
                // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
                '/api': {
                  target: 'http://www.baidu.com', // 我们要代理请求的地址
                   // 路径重写
                  pathRewrite: {
                      // 路径重写  localhost:8888/api/login  => www.baidu.com/api/login
                      '^/api': '' // 假设我们想把 localhost:8888/api/login 变成  www.baidu.com/login 就需要这么做 
                  }
              },
            }
          }
        }