크로스 도메인이 설정되지 않은 경우 크로스 도메인이 되어야 하는 인터페이스는 다음과 같습니다.

https://sug.so.360.cn/suggest?word=a

단어는 매개변수입니다

교차 도메인 설정 방법

1. vue의 크로스 도메인의 첫 번째 단계는 vue의 루트 디렉토리에 vue.config.js 파일을 생성하는 것입니다. 이 vue.config.js 파일의 내용이 변경되는 한 프로젝트를 다시 시작해야 합니다. 코드를 작성

// 这个文件是vue的配置文件
// 一些额外的配置都放在这里
// 比如 跨域 自动打开浏览器  输出目录
module.exports = {
  publicPath: "./",
  devServer: {
    open: true, // 自动打开浏览器
    // proxy: "https://sug.so.360.cn", 这个接口必须跨域
    // 可以直接设置跨域的地址
    proxy: {
      "/api": {
        target: "https://sug.so.360.cn",
        changeOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "",
        },
      },
    }, 
    //  不是所有的接口都要跨域 也可以给需要跨域的接口起一个识别的名字  
    // 只有前面带/api的接口才会跨域 其他的接口正常访问
  },
};
// proxy跨域其实也是一种代理跨域 可以理解为欺骗浏览器 让浏览器以为没有跨域 访问的还是8080 ，但是服务器看到/api就会把地址变成需要跨域的地址
// 该配置文件修改了 要重新启动

패키지 axios 내부

// 封装axios请求的模块
import axios from 'axios'
// 用axios重新生成了请求的实例
const server = axios.create({
    baseURL: '', // 项目发送axios请求的公共地址 值为空
    timeout: 5000 // 请求超时时间 这里是请求超过五秒后还没有获得请求结果 提示请求超时
})

server.interceptors.request.use(config => {
    // config包含了请求相关的所有信息
    // 可以同过config对象给请求配置或者修改信息
    config.headers.token = '11111'
    return config // 将配置完成的token返回 如果不返回 请求不会继续进行
}, err => {
    // 请求发生错误时的回调函数
    // 这里的意思是请求发送错误时将错误抛出
    // throw new Error(err)
    // console.error(err) //将错误信息打印在控制台中
    Promise.reject(err) // 使用promise将错误信息返回出去
})

// axios 接受到服务器响应信息后的配置
// response 是响应的意思 这里的意思是使用响应拦截
server.interceptors.response.use(res => {
    // res包含了服务器返回的所有响应信息 其实就是服务器返回给你的东西
    return res.data
}, err => {
    // 当服务器响应产生错误时的回调函数
    console.error(err) // 这里将服务器发生错误的错误信息打印在控制台中
})


export default server

API를 요청할 때

import request from '../network/reques'

const getBanners = async () => {
//  /api 加上说明这个接口要跨域
    let
        data = await request({
            url: '/api/suggest?word=a'
        })
    // console.log(data);
    return data
}


export {
    getBanners
}

jsonp 크로스 도메인

1. Ajax는 동일 출처 정책에 의해 제약을 받고 데이터에 대한 교차 도메인 액세스를 허용하지 않지만 스크립트 태그를 동적으로 생성하고 스크립트의 src 속성을 사용하여 동일 출처 정책의 제약을 피할 수 있습니다.

1. 동적으로 <script></script> 생성(document.createElement('script'))

2. 도메인 간 요청에 대해 src 속성(매개변수 callback=fn이 src에 포함되어야 함)을 설정합니다.

3. 실행할 페이지에 <script></script> 추가(body.appendChild('script'))

4. 페이지는 미리 콜백을 정의해야 합니다.

5. 백엔드는 callback(data) 매개변수를 실행하고 래핑하는 콜백 함수를 반환합니다.

주목:

서버는 더 이상 JSON 형식의 데이터를 반환하지 않고 콜백 함수를 반환하여 src에서 호출되는 데이터(fn({name:'tom',age:18})를 래핑하여 크로스 도메인을 구현합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let dom = document.createElement("script");
    // src属性帮助我们访问 接口 返回的是一段js代码 返回的代码格式是
    // callback =fn  传入一个回调函数 用来接收 请求来的数据
    dom.src = "https://sug.so.360.cn/suggest?callback=fn&word=a";
    let body = document.getElementsByTagName("body")[0];
    body.appendChild(dom); // 往 body 里追加 dom 
    // fn({res:xxx,status:111})
    // 意思是执行fn函数 实参是请求到的数据
    // 我们需要定义一个fn去接收这个实参
    function fn(val) {
        console.log(val);
    }
</script>

</html>

교차 도메인을 달성하는 방법? vue 크로스 도메인 프록시 구성, jsonp 크로스 도메인은 매우 간단합니다.

크로스 도메인이 설정되지 않은 경우 크로스 도메인이 되어야 하는 인터페이스는 다음과 같습니다.

교차 도메인 설정 방법

jsonp 크로스 도메인

추천