什么是同源策略,什么是跨域,如何解决跨域

1.什么是同源策略?

同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 1995 年引入浏览器,它是浏览器最核心也最基本的安全功能,现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略,浏览器很容易受到 XSS、 CSFR 等攻击。

同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源。

源就是协议、域名和端口号。

协议:http,https

域名:区域的名字,每个域名都对应一个IP地址, 举个例子:域名:www.baidu.com,http://180.101.49.12/

180.101.49.12则为IP地址

2.什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

3.如何解决跨域

1.后台放开限制        优点:谁都能请求,方便        缺点:不安全

2.JSONP     JSONP实现原理   

利用script标签中的src属性不受同源策略限制

3.配置代理

下面是Vuevue代理服务器proxy配置实现跨域

步骤:

(1)安装脚手架

npm i @vue/cli -g

(2)利用脚手架创建项目

vue create myproject(myproject自己起的项目名)

(3)创建完项目后,需手动在项目根目录创建vue.config.js

什么是同源策略,什么是跨域,如何解决跨域_第1张图片

module.exports = {
    devServer:{

        proxy:{
            '/course-api': {
                //代理地址
                target: 'https://course.myhope365.com/api',
                // target: 'http://wkt.myhope365.com',
                //路径重写(代理重写)
                pathRewrite:{
                    '^/course-api':''
                }
            },
        },
    }
};

(4)在请求跨域接口的时候就可以利用本地服务加上要跨域的接口地址即可

export function getUserInfo() {
    return http.get("/course-api/pcUser/login-user/info")
}

 

 

你可能感兴趣的:(vue.js,vue.js,javascript,webstorm,visual,studio,code,webpack)