js跨域问题以及chrome极简解决方案

作者:zarte    发布时间: 2020-02-29

js跨域

今天是四年一次的日子,发篇记录下-。- ## 问题 前后端分离的项目,可能是两个不同的域。这时候js请求就会出现跨域问题。 ## 解决方案 ### 1.后端设置允许跨域 php例子: ```php header("Access-Control-Allow-Origin: ".$_SERVER['HTTP_ORIGIN']); // *代表允许任何网址请求,这里直接使用来源 header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允许请求的类型 header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin'); // 设置允许自定义请求头的字段 ``` 删除在预检请求中可能会产生的重定向,对于option的请求可以先返回空,其他判断放在正式请求中。 PHP例子: ```php if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { exit(); } ``` ### 2.前端修改 一般是无需修改前端的。 这里列举一种vue的解决方案 ```js module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8001',//后端接口地址 changeOrigin: true,//是否允许跨越 pathRewrite: { '^/api': '/api',//重写, } } }, } } ``` ### 3.推荐简单方案适用于chrome 网上可以找到的一种是新建程序启动快捷方式,右键打开属性,切换到快捷方式标签栏,在目标输入框的最后加上 空格 --disable-web-security --user-data-dir。点击保存后重新打开浏览器即可。 但是!新版测试无法开启。正确方式 --disable-web-security --user-data-dir=c:/test(这里的路径随便一个文件夹即可) 也可以通过命令行方式启动,开启成功浏览器会提示稳定性和安全性会有所下降。 ## 会遇到的问题 1. Redirect is not allowed for a preflight request: 预请被重定向,这是不允许的,说明option类型的预请求失败,一般是后端程序登陆验证不通过跳转到登陆界面造成的。 2. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include': 当前端配置withCredentials=true时, 后端配置Access-Control-Allow-Origin不能为*, 必须是相应地址,如果不需要cookie的把withCredentials设为false即可 3. 'http://localhost:8000/' that is not equal to the supplied origin: localhost改成本机ip地址或者127.0.0.1即可,这个问题只会出现在chrome中ie则正常。具体原因不明。

上一篇:  csv文件excel打开中文乱码记事本打开正常

下一篇:  elasticsearch教程(一)——docker方式安装

加载更多